'use client';

import { Gift } from 'lucide-react';

import PromotionSlider from '@/shared/components/promotion-slider';
import { useLanguage } from '@/shared/language';

export const PromotionsSection = () => {
  const { t } = useLanguage();

  return (
    <section id='promotions' className='bg-gray-50 py-8 px-2 sm:py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 flex flex-col items-center justify-center text-center'>
          <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
            <Gift className='h-6 w-6 text-red-600' />
          </div>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.promotions.title')}
          </h2>
          <p className='max-w-2xl text-gray-600'>
            {t('home.promotions.description')}
          </p>
        </div>
        <PromotionSlider />
      </div>
    </section>
  );
};
