'use client';
import React from 'react';
import { motion } from 'framer-motion';
import OurProductCard from './OurProductCard';
import { useQuery } from '@tanstack/react-query';
import { getAllProduct } from '@/shared/config/api/testApi';

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

const OurCompanyProducts = () => {
  const { data: resProducts, isLoading: loadProducts } = useQuery({
    queryKey: ['all-products'],
    queryFn: () => getAllProduct(),
  });

  const products = resProducts?.results || [];

  if (loadProducts)
    return (
      <div className="bg-gray-50">
        <div className="custom-container min-h-[400px] flex justify-center items-center text-muted font-medium">
          Загрузка...
        </div>
      </div>
    );
  return (
    <div className="relative my-[50px]">
      <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 max-w-[800px] mx-auto">
            Широкий выбор первоклассных переработанных пищевых ингредиентов
          </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-4 gap-4 lg:gap-6 py-[20px]"
        ></motion.div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
          {products &&
            products.length > 0 &&
            products.map((item) => (
              <motion.div
                key={item.id}
                variants={{
                  hidden: { opacity: 0, y: 30 },
                  visible: {
                    opacity: 1,
                    y: 0,
                    transition: { duration: 0.6, ease: [0, 0.55, 0.45, 1] as const },
                  },
                }}
              >
                <OurProductCard item={item} />
              </motion.div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default OurCompanyProducts;
