'use client';

import { CreditCard, type LucideProps, Percent, Wallet } from 'lucide-react';
import { type ForwardRefExoticComponent, type RefAttributes } from 'react';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/shared/shadcn-ui/card';

interface ServiceOverview {
  title: string;
  description: string;
  contentText: string;
  Icon: ForwardRefExoticComponent<
    Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
  >;
}

const servicesOverview: Array<ServiceOverview> = [
  {
    title: 'Программа лояльности',
    description: 'Накапливайте баллы и получайте скидки',
    contentText:
      'Наша программа лояльности позволяет накапливать баллы за каждую покупку и обменивать их на скидки и подарки.',
    Icon: Percent,
  },
  {
    title: 'Топливная карта',
    description: 'Удобный способ оплаты топлива',
    contentText:
      'Топливные карты для физических и юридических лиц. Контролируйте расходы и получайте дополнительные преимущества.',
    Icon: CreditCard,
  },
  {
    title: 'Способы оплаты',
    description: 'Различные способы оплаты на наших заправках',
    contentText:
      'Мы предлагаем различные способы оплаты: наличные, банковские карты, мобильные платежи и топливные карты.',
    Icon: Wallet,
  },
];

export const ServicesOverviewSection = () => {
  const { t } = useTextController();

  return (
    <section className='py-16'>
      <div className='container mx-auto'>
        <div className='mb-12 text-center'>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('clients.services.title')}
          </h2>
          <p className='mx-auto max-w-2xl text-gray-600'>
            {t('clients.services.subtitle')}
          </p>
        </div>

        <div className='grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
          {servicesOverview.map(({ description, Icon, contentText, title }) => {
            return (
              <Card
                key={title}
                className='overflow-hidden transition-all hover:shadow-lg'
              >
                <CardHeader className='pb-3'>
                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                    <Icon className='h-6 w-6 text-red-600' />
                  </div>
                  <CardTitle>{title}</CardTitle>
                  <CardDescription>{description}</CardDescription>
                </CardHeader>
                <CardContent className='text-sm text-gray-600'>
                  <p>{contentText}</p>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
};