import Image from "next/image";

interface ImageGridProps {
    photos: string[];
}

export function ImageGrid({ photos }: ImageGridProps) {
    return (
        <div className="max-w-[95%] mx-auto mb-12">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-2 h-[400px] md:h-[500px] rounded-xl overflow-hidden md:rounded-none">
                <div className="md:col-span-2 h-full relative border-2 border-black group overflow-hidden">
                    <Image
                        src={photos[0]}
                        alt="Main view"
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                </div>
                <div className="hidden md:grid grid-cols-1 gap-2 h-full">
                    <div className="relative h-full border-2 border-black group overflow-hidden">
                        <Image
                            src={photos[1]}
                            alt="View 2"
                            fill
                            className="object-cover group-hover:scale-105 transition-transform duration-500"
                        />
                    </div>
                    <div className="relative h-full border-2 border-black group overflow-hidden">
                        <Image
                            src={photos[2]}
                            alt="View 3"
                            fill
                            className="object-cover group-hover:scale-105 transition-transform duration-500"
                        />
                    </div>
                </div>
                <div className="hidden md:grid grid-cols-1 gap-2 h-full">
                    <div className="relative h-full border-2 border-black group overflow-hidden">
                        <Image
                            src={photos[3]}
                            alt="View 4"
                            fill
                            className="object-cover group-hover:scale-105 transition-transform duration-500"
                        />
                    </div>
                    <div className="relative h-full border-2 border-black group overflow-hidden">
                        <Image
                            src={photos[4]}
                            alt="View 5"
                            fill
                            className="object-cover group-hover:scale-105 transition-transform duration-500"
                        />
                        <button className="absolute bottom-4 right-4 bg-white border-2 border-black px-4 py-2 text-sm font-medium hover:bg-[#E7FE78] transition-colors">
                            Show all photos
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}
