'use client';

import { Check } from 'lucide-react';

import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language';
import { Card, CardContent } from '@/shared/shadcn-ui/card';

const loyaltyLevels = [
  {
    id: 'card-1',
    borderColor: 'gray-400',
    title: 'clients.loyalty.works.levels.card-1.title',
    percent: 'clients.loyalty.works.levels.card-1.percent',
    bonuses: [
      'clients.loyalty.works.levels.card-1.bonus-1',
      'clients.loyalty.works.levels.card-1.bonus-2',
      'clients.loyalty.works.levels.card-1.bonus-3',
    ],
  },
  {
    id: 'card-2',
    borderColor: 'yellow-500',
    title: 'clients.loyalty.works.levels.card-2.title',
    percent: 'clients.loyalty.works.levels.card-2.percent',
    bonuses: [
      'clients.loyalty.works.levels.card-2.bonus-1',
      'clients.loyalty.works.levels.card-2.bonus-2',
      'clients.loyalty.works.levels.card-2.bonus-3',
      'clients.loyalty.works.levels.card-2.bonus-4',
    ],
  },
  {
    id: 'card-3',
    borderColor: 'red-600',
    title: 'clients.loyalty.works.levels.card-3.title',
    percent: 'clients.loyalty.works.levels.card-3.percent',
    bonuses: [
      'clients.loyalty.works.levels.card-3.bonus-1',
      'clients.loyalty.works.levels.card-3.bonus-2',
      'clients.loyalty.works.levels.card-3.bonus-3',
      'clients.loyalty.works.levels.card-3.bonus-4',
      'clients.loyalty.works.levels.card-3.bonus-5',
    ],
  },
];

const LoyaltyLevels = () => {
  const { t } = useTextController();

  return (
    <Container>
      <div className='mb-12 text-center'>
        <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
          {t('clients.loyalty.works.levels.title')}
        </h2>
        <p className='mx-auto max-w-2xl text-gray-600'>
          {t('clients.loyalty.works.levels.description')}
        </p>
      </div>

      <div className='grid gap-8 md:grid-cols-3'>
        {loyaltyLevels.map((level) => (
          <Card
            key={level.id}
            data-aos='flip-left'
            data-aos-duration='500'
            className={`overflow-hidden border-t-4 border-t-${level.borderColor} transition-all hover:shadow-lg`}
          >
            <CardContent className='p-6'>
              <h3 className='mb-4 text-center text-2xl font-bold'>
                {t(level.title)}
              </h3>
              <div className='mb-6 text-center'>
                <span className='text-4xl font-bold'>{t(level.percent)}</span>
                <p className='text-sm text-gray-600'>
                  {t('clients.loyalty.works.levels.card.mark')}
                </p>
              </div>
              <ul className='space-y-2'>
                {level.bonuses.map((bonus, index) => (
                  <li
                    key={`${level.id}-bonus-${index}`}
                    className='flex items-center'
                  >
                    <Check className='mr-2 h-5 w-5 text-green-500' />
                    <span>{t(bonus)}</span>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        ))}
      </div>
    </Container>
  );
};

export default LoyaltyLevels;
