'use client';
import React from 'react';
import NewProductCard from './NewProductCard';
import { motion } from 'framer-motion';
import '@/shared/ogenix-icons/style.css';
import { ICategory } from '@/shared/types/testApi';

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.3,
    },
  },
};

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: [0, 0.55, 0.45, 1] as const },
  },
};

const HomeNewProducts = ({
  categoryData,
}: {
  categoryData: ICategory[] | undefined;
}) => {
  return (
    <div className="pt-[50px] relative">
      <div className="relative z-10 custom-container">
        <motion.div
          initial={{ opacity: 0, top: '-20px' }}
          whileInView={{ opacity: 1, top: 0 }}
          transition={{ duration: 0.5 }}
          viewport={{ amount: 1, once: true }}
          className="relative"
        >
          <p className="text-center font-extrabold text-primary font-caveat text-[24px]">
            Категория продукта
          </p>
          <h4 className="text-center font-extrabold text-[32px] text-accent tracking-tighter">
            НАШИ ПРОДУКТЫ
          </h4>
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.3 }}
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6 py-[20px]"
        >
          {categoryData &&
            categoryData.length > 0 &&
            categoryData?.map((item, index) => (
              <motion.div key={item.id} variants={cardVariants}>
                <NewProductCard item={item} index={index} />
              </motion.div>
            ))}
        </motion.div>
      </div>
      <div className="absolute top-0 left-0 right-0 h-[250px] bg-[url(/images/home-new-product/new-pro-bg1.webp)] z-[1]">
        <div className="absolute bottom-[-48px] bg-bottom left-0 right-0 h-[50px] bg-cover bg-[url(/images/home-new-product/new-pro-bg2.webp)]"></div>
      </div>
    </div>
  );
};

export default HomeNewProducts;
