import Image from "next/image";

const reviewCategories = [
    {
        id: 1,
        image: "/images/heart.png",
        label: "Отзывы",
    },
    {
        id: 2,
        image: "/images/heart.png",
        label: "Свидание",
    },
    {
        id: 3,
        image: "/images/heart.png",
        label: "Закат",
    },
    {
        id: 4,
        image: "/images/heart.png",
        label: "С детьми",
    },
    {
        id: 5,
        image: "/images/heart.png",
        label: "Вечеринка",
    },
    {
        id: 6,
        image: "/images/heart.png",
        label: "Девичник",
    },
];

export default function Reviews() {
    return (
        <section className="container mx-auto max-w-6xl px-4 py-12">
            <h1 className="text-4xl font-bold mb-4 text-black">
                Отзывы и истории аренд яхт
            </h1>
            <div className="flex gap-12 overflow-x-auto pb-4">
                {reviewCategories.map((category) => (
                    <div
                        key={category.id}
                        className="flex-shrink-0 text-center cursor-pointer"
                    >
                        <div className="relative w-24 h-24 mx-auto mb-3">
                            <Image
                                src={category.image}
                                alt={category.label}
                                fill
                                className="rounded-full object-cover"
                            />
                        </div>
                        <p className="text-sm font-medium text-gray-800">
                            {category.label}
                        </p>
                    </div>
                ))}
            </div>
        </section>
    );
}
