'use client';

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';
import Image from 'next/image';
import { PRODUCT_INFO } from '@/shared/constants/data';
import { motion } from 'framer-motion';
import { Button } from '@/shared/ui/button';
import Link from 'next/link';
import { IBanner } from '@/shared/types/testApi';

const bgVariants = {
  initial: { scale: 1 },
  animate: {
    scale: 1.2,
    transition: { duration: 5 },
  },
};

const textVariants = {
  initial: {
    opacity: 0,
    y: -50,
  },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 1.6,
      ease: [0, 0.55, 0.45, 1] as const,
    },
  },
};

const btnsVariants = {
  initial: {
    opacity: 0,
    y: 50,
  },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 1.6,
      ease: [0, 0.55, 0.45, 1] as const,
    },
  },
};

const HomeSwiper = ({ bannerData }: { bannerData: IBanner[] | undefined }) => {
  return (
    <Swiper
      spaceBetween={0}
      slidesPerView={1}
      pagination={{ clickable: true }}
      modules={[Pagination, Autoplay]}
      speed={800}
      autoplay={{
        delay: 4000,
        disableOnInteraction: false,
      }}
      loop={true}
    >
      {bannerData?.map((item) => (
        <SwiperSlide key={item.id}>
          {({ isActive }) => (
            <div className="w-full h-[calc(100vh-30px)] max-h-[600px] relative">
              <motion.div
                className="absolute inset-0 overflow-hidden"
                variants={bgVariants}
                initial="initial"
                animate={isActive ? 'animate' : 'initial'}
              >
                <Image
                  src={item.image}
                  alt={PRODUCT_INFO.name}
                  className="object-cover w-full h-full brightness-50"
                  fill
                  priority
                />
                <div className="absolute inset-0 bg-primary/10 z-10" />
              </motion.div>
              <div className="absolute custom-container inset-0 z-20 flex items-center flex-col gap-5 justify-center text-white">
                <motion.div
                  variants={textVariants}
                  initial="initial"
                  animate={isActive ? 'animate' : 'initial'}
                  className="text-center space-y-4 max-w-[700px] py-[5%]"
                >
                  <p className="text-sm md:text-lg font-medium">
                    {item.subtitle}
                  </p>
                  <h1 className="text-[35px] md:text-[50px] lg:text-[60px] leading-[40px] lg:leading-[62px] font-bold">
                    {item.title}
                  </h1>
                </motion.div>
                <motion.div
                  variants={btnsVariants}
                  initial="initial"
                  animate={isActive ? 'animate' : 'initial'}
                  className="flex justify-center items-center gap-3 max-w-[700px]"
                >
                  <Link href={'/contact-us'}>
                    <Button variant={'secondary'}>Оставить заявку</Button>
                  </Link>
                  <Link href={'/products'}>
                    <Button>Каталог продуктов</Button>
                  </Link>
                </motion.div>
              </div>
            </div>
          )}
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default HomeSwiper;
