'use client';

import { ChevronLeft, ChevronRight } from 'lucide-react';
import Image from 'next/image';
import { useEffect, useState } from 'react';

import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';

const promotions = [
  {
    id: 1,
    title: 'Скидка 10% на премиум топливо',
    description:
      'Получите скидку 10% на премиум топливо при заправке от 30 литров',
    image: '/placeholder.svg?height=200&width=400&text=Promotion 1',
    validUntil: '31.12.2023',
  },
  {
    id: 2,
    title: 'Кофе в подарок',
    description: 'Получите бесплатный кофе при заправке от 20 литров',
    image: '/placeholder.svg?height=200&width=400&text=Promotion 2',
    validUntil: '15.11.2023',
  },
  {
    id: 3,
    title: 'Двойные баллы по карте лояльности',
    description: 'Получайте в 2 раза больше баллов при заправке в выходные дни',
    image: '/placeholder.svg?height=200&width=400&text=Promotion 3',
    validUntil: '30.11.2023',
  },
  {
    id: 4,
    title: 'Скидка на автомойку',
    description: 'Скидка 20% на автомойку при заправке от 40 литров',
    image: '/placeholder.svg?height=200&width=400&text=Promotion 4',
    validUntil: '31.12.2023',
  },
];

export default function PromotionSlider() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [visibleItems, setVisibleItems] = useState(3);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setVisibleItems(1);
      } else if (window.innerWidth < 1024) {
        setVisibleItems(2);
      } else {
        setVisibleItems(3);
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const nextSlide = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex + visibleItems >= promotions.length ? 0 : prevIndex + 1,
    );
  };

  const prevSlide = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex === 0
        ? Math.max(0, promotions.length - visibleItems)
        : prevIndex - 1,
    );
  };

  return (
    <div className='relative'>
      <div className='overflow-hidden'>
        <div
          className='flex transition-transform duration-300 ease-in-out'
          style={{
            transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
          }}
        >
          {promotions.map((promo) => (
            <div
              key={promo.id}
              className='w-full flex-none p-2 sm:w-1/2 lg:w-1/3'
              data-aos='zoom-in-right'
              data-aos-duration='700'
            >
              <Card className='h-full overflow-hidden transition-shadow hover:shadow-lg'>
                <div className='relative h-48'>
                  <Image
                    src={promo.image || '/placeholder.svg'}
                    alt={promo.title}
                    fill
                    className='object-cover'
                  />
                </div>
                <CardContent className='p-4'>
                  <h3 className='mb-2 text-lg font-bold'>{promo.title}</h3>
                  <p className='mb-3 text-sm text-gray-600'>
                    {promo.description}
                  </p>
                  <div className='flex items-center justify-between'>
                    <span className='text-xs text-gray-500'>
                      Действует до: {promo.validUntil}
                    </span>
                    <Button
                      variant='outline'
                      size='sm'
                      className='border-red-600 text-red-600 hover:bg-red-50'
                    >
                      Подробнее
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>

      <Button
        variant='outline'
        size='icon'
        className='absolute top-1/2 left-0 z-10 -translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
        onClick={prevSlide}
      >
        <ChevronLeft className='h-4 w-4' />
        <span className='sr-only'>Предыдущий</span>
      </Button>

      <Button
        variant='outline'
        size='icon'
        className='absolute top-1/2 right-0 z-10 translate-x-1/2 -translate-y-1/2 border-gray-200 bg-white shadow-lg'
        onClick={nextSlide}
      >
        <ChevronRight className='h-4 w-4' />
        <span className='sr-only'>Следующий</span>
      </Button>
    </div>
  );
}
