'use client';

import Image from "next/image";
import { motion } from "framer-motion";
import styles from "@/components/Categories/Categories.module.css";
import { menuData } from "@/utils/constant";

export default function Categories() {
    // Extract unique categories from menuData with custom images
    const categories = menuData.map(section => ({
        name: section.category,
        image: section.image
    }));

    // Animation variants
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.15,
                delayChildren: 0.2
            }
        }
    };

    const cardVariants = {
        hidden: { opacity: 0, y: 50, scale: 0.9 },
        visible: {
            opacity: 1,
            y: 0,
            scale: 1,
            transition: {
                duration: 0.6,
                ease: "easeOut" as const
            }
        }
    };

    return (
        <section className={styles.categoriesSection}>
            {/* Heading Section */}
            <section className={styles.sectionHeading}>
                <div
                    className={styles.smallHeading}
                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}
                >
                    <Image src="/images/dinner.png" alt="Categories Decorative Dinner Icon" width={24} height={24} />
                    <span>DISCOVER</span>
                    <Image src="/images/eat.png" alt="Categories Decorative Cutlery Icon" width={24} height={24} />
                </div>
                <h2 className={styles.mainHeading}>Our Menu Categories</h2>
                <p className={styles.description}>
                    Explore our authentic Turkish culinary offerings, featuring everything from charcoal-grilled kebabs and flavorful mezzes to hearty mains and handcrafted desserts. Each category celebrates the rich traditions and vibrant tastes of Anatolia.
                </p>
            </section>

            {/* Categories Grid */}
            <motion.div
                className={styles.categoriesGrid}
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true, amount: 0.2 }}
                variants={containerVariants}
            >
                {categories.map((category, index) => (
                    <motion.div
                        key={index}
                        className={styles.categoryCard}
                        variants={cardVariants}
                        whileHover={{
                            y: -10,
                            transition: { duration: 0.3 }
                        }}
                    >
                        <div className={styles.imageContainer}>
                            <div className={styles.imageWrapper}>
                                <Image
                                    src={category.image}
                                    alt={`${category.name} Category`}
                                    fill
                                    className={styles.categoryImage}
                                />
                            </div>
                            <div className={styles.overlay}></div>
                        </div>
                        <div className={styles.categoryContent}>
                            <h3 className={styles.categoryName}>{category.name}</h3>
                            <div className={styles.decorativeLine}></div>
                        </div>
                    </motion.div>
                ))}
            </motion.div>
        </section>
    );
}
