"use client";

import Image from "next/image";
import { useState } from "react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";

const reviewCategories = [
    {
        id: 1,
        image: "/images/reviews/review1.jpg",
        label: "ОТЗЫВЫ",
    },
    {
        id: 2,
        image: "/images/reviews/review2.jpg",
        label: "АКТИВНЫЙ ОТДЫХ",
    },
    {
        id: 3,
        image: "/images/reviews/review3.jpg",
        label: "ЗАКАТ",
    },
    {
        id: 4,
        image: "/images/reviews/review4.jpg",
        label: "С ДЕТЬМИ",
    },
    {
        id: 5,
        image: "/images/reviews/review5.jpg",
        label: "ВЕЧЕРИНКА",
    },
    {
        id: 6,
        image: "/images/reviews/review6.jpg",
        label: "ДЕВИЧНИК",
    },
    {
        id: 7,
        image: "/images/reviews/review7.jpg",
        label: "СВИДАНИЕ",
    },
    {
        id: 8,
        image: "/images/reviews/review8.jpg",
        label: "ПРЕДЛОЖЕНИЕ",
    },
];

export default function Reviews() {
    const [isDialogOpen, setIsDialogOpen] = useState(false);

    const handleCardClick = () => {
        setIsDialogOpen(true);
    };

    return (
        <section className="mt-8 md:mt-12">
            <div className="container mx-auto max-w-6xl px-4">
                <h1 className="text-3xl md:text-4xl font-bold mb-8 text-black ">
                    Впечатления и отзывы
                </h1>
                <div className="flex gap-6 overflow-auto">
                    {reviewCategories.map((category) => (
                        <div
                            key={category.id}
                            className="flex-1 min-w-28 cursor-pointer group"
                            onClick={handleCardClick}
                        >
                            <div className="relative w-full h-39 rounded-lg overflow-hidden">
                                <Image
                                    src={category.image}
                                    alt={category.label}
                                    fill
                                    className="object-cover"
                                />
                                {/* Градиентный оверлей */}
                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
                                {/* Цветная внутренняя граница */}
                                <div className="absolute inset-1 border-2 border-brand rounded-md group-hover:border-dashed"></div>
                                {/* Текст внизу карточки */}
                                <div className="absolute bottom-0 left-0 right-0 p-3">
                                    <p className="text-white font-medium text-xs text-center">
                                        {category.label}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Диалог */}
                <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                    <DialogContent
                        className="border-0 h-[700px] max-w-[370px] p-0 bg-cover bg-center bg-no-repeat flex flex-col"
                        style={{ backgroundImage: "url(/images/yacht.jpg)" }}
                    >
                        {/* Кнопка закрытия */}
                        <button
                            onClick={() => setIsDialogOpen(false)}
                            className="absolute top-4 right-4 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors z-10"
                        >
                            <X />
                        </button>

                        {/* Пустое пространство для выталкивания контента вниз */}
                        <div className="flex-1"></div>

                        {/* Нижняя секция с текстом и кнопкой */}
                        <div className="p-6 space-y-4 bg-gradient-to-t from-black/60 to-transparent">
                            <div className="space-y-2">
                                <DialogTitle className="text-white text-xl font-bold">
                                    Тема
                                </DialogTitle>
                                <p className="text-white text-sm">Текст</p>
                            </div>

                            {/* Кнопка с градиентом */}
                            <Button
                                variant="gradient"
                                className="font-bold text-white h-[48px] w-full px-8"
                            >
                                Хочу также
                            </Button>
                        </div>
                    </DialogContent>
                </Dialog>
            </div>
        </section>
    );
}
