смотри, вот сейчас картинка максимально увеличина и ее нормально не видно исправь это но нужно что бы картинка заполняла весб контенйер исправь все это и скинь полноценный обновленный код. "use client"

import { useState, useEffect } from "react" import Image from "next/image" import { ImageModal } from "@/components/ui/image-modal" import { ChevronLeft, ChevronRight } from "lucide-react"

const allWorks = [ { id: 1, image: "/images/photo_2023-08-15_20-40-12 (2).jpg" }, { id: 2, image: "/кухня-работа-1.png" }, { id: 3, image: "/гардеробная-работа-1.png" }, { id: 4, image: "/шкаф-работа-2.png" }, { id: 5, image: "/кухня-работа-2.png" }, { id: 6, image: "/гостиная-работа-1.png" }, { id: 7, image: "/спальня-работа-1.png" }, { id: 8, image: "/детская-работа-1.png" }, { id: 9, image: "/шкаф-работа-3.png" }, { id: 10, image: "/кухня-работа-3.png" } ]

export default function OurWorks() { const [selectedImage, setSelectedImage] = useState<string | null>(null) const [currentSlide, setCurrentSlide] = useState(0)

const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % allWorks.length) }

const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + allWorks.length) % allWorks.length) }

const goToSlide = (index: number) => { setCurrentSlide(index) }

useEffect(() => { const interval = setInterval(nextSlide, 5000) return () => clearInterval(interval) }, [currentSlide])

const currentWork = allWorks[currentSlide]

return ( <> <section className="py-12 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center"> <div className="container px-4 md:px-6 w-full"> <div className="max-w-[1400px] mx-auto"> <div className="relative bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"> <div className="relative h-[300px] md:h-[450px] xl:h-[550px] flex items-center justify-center"> <div className="relative w-full h-full"> <Image src={currentWork.image} alt="Gallery image" fill sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw" priority className="object-cover cursor-pointer transition-transform duration-300 hover:scale-105" onClick={() => setSelectedImage(currentWork.image)} /> </div> </div>

          <div className="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-black/20 to-transparent pointer-events-none" />
          <div className="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-black/20 to-transparent pointer-events-none" />
          
          <button
            onClick={prevSlide}
            className="absolute left-6 lg:left-12 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-md text-white p-3 rounded-full transition-all hover:scale-110 z-10"
          >
            <ChevronLeft className="h-6 w-6" />
          </button>
          
          <button
            onClick={nextSlide}
            className="absolute right-6 lg:right-12 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-md text-white p-3 rounded-full transition-all hover:scale-110 z-10"
          >
            <ChevronRight className="h-6 w-6" />
          </button>

          <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 bg-black/30 backdrop-blur-sm px-4 py-2 rounded-full">
            {allWorks.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`h-2 rounded-full transition-all hover:scale-110 ${
                  index === currentSlide 
                    ? "bg-white w-8" 
                    : "bg-white/50 hover:bg-white/70 w-2"
                }`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <ImageModal
    isOpen={!!selectedImage}
    onClose={() => setSelectedImage(null)}
    src={selectedImage || ''}
    alt="Увеличенное изображение"
  />
</>
) }