'use client';

import { Handshake } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Partners } from '@/app/api-utlities/@types';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Button } from '@/shared/shadcn-ui/button';

interface PartnersSectionProps {
  partners: Partners;
}

export const PartnersSection = ({ partners }: PartnersSectionProps) => {
  const { t } = useTextController();

  return (
    <section id='partners' className='bg-gray-50 px-2 py-8 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'>
            <Handshake className='h-6 w-6 text-red-600' />
          </div>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.partners.title')}
          </h2>
          <p className='max-w-2xl text-gray-600'>
            {t('home.partners.description')}
          </p>
        </div>

        <div className='grid grid-cols-2 gap-4 sm:gap-8 md:grid-cols-4'>
          {partners.map(({ id, name, poster }) => (
            <div
              key={id}
              className='flex h-32 flex-col items-center justify-center gap-0.5 rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105'
              data-aos='flip-left'
            >
              <Image
                src={
                  poster ??
                  `/placeholder.svg?height=80&width=160&text=Partner ${id}`
                }
                alt={`Partner ${id}`}
                width={160}
                height={80}
                className='max-h-16 w-auto'
              />
              <h4 className='font-extralight'>{name}</h4>
            </div>
          ))}
        </div>

        <div className='mt-12 text-center'>
          <h3 className='mb-4 text-xl font-bold'>
            {t('home.partners.becomePartner')}
          </h3>
          <p className='mx-auto mb-6 max-w-2xl text-gray-600'>
            {t('home.partners.becomePartnerText')}
          </p>
          <Link href='#'>
            <Button className='bg-red-600 hover:bg-red-700'>
              {t('common.buttons.contactUs')}
            </Button>
          </Link>
        </div>
      </div>
    </section>
  );
};
