'use client';

import { Handshake } from 'lucide-react';
import { useMemo } from 'react';

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

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

import { PartnersSlider } from './partners-slider';

interface PartnersSectionProps {
  partners: Partners;
}

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

  const [partnersFirstHalf, partnersSecondHalf] = useMemo(() => {
    const length = partners.length;
    const midPoint = Math.floor(length / 2);

    const partnersFirstHalf = partners.slice(0, midPoint);
    const partnersSecondHalf = partners.slice(midPoint);

    return [partnersFirstHalf, partnersSecondHalf];
  }, [partners]);

  return (
    <section id='partners' className='bg-gray-50 py-8 sm:py-16'>
      <div className='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>

        <PartnersSlider
          partners={partnersFirstHalf}
          autoplaySpeed={3000}
          className='mb-12'
        />

        <PartnersSlider
          partners={partnersSecondHalf}
          autoplaySpeed={4000}
          direction='rtl'
        />

        <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>
          <Button className='bg-red-600 hover:bg-red-700'>
            {t('common.buttons.contactUs')}
          </Button>
        </div>
      </div>
    </section>
  );
};