'use client';

import { Briefcase } from 'lucide-react';

import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button';
import { Card, CardContent } from '@/shared/shadcn-ui/card';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/shared/shadcn-ui/tabs';

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

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

        <Tabs defaultValue='all' className='mx-auto w-full max-w-3xl'>
          <TabsList className='mb-8 grid grid-cols-3'>
            <TabsTrigger value='all'>Все вакансии</TabsTrigger>
            <TabsTrigger value='office'>Офис</TabsTrigger>
            <TabsTrigger value='stations'>Заправки</TabsTrigger>
          </TabsList>
          <TabsContent value='all' className='space-y-4'>
            {[
              'Оператор АЗС',
              'Менеджер по продажам',
              'Бухгалтер',
              'Специалист по логистике',
            ].map((job, index) => (
              <Card
                key={index}
                className='overflow-hidden transition-all hover:shadow-md'
                data-aos='zoom-in'
              >
                <CardContent className='p-0'>
                  <div className='p-6'>
                    <div className='flex items-start justify-between'>
                      <div>
                        <h3 className='mb-2 text-lg font-bold'>{job}</h3>
                        <p className='mb-4 text-sm text-gray-500'>
                          Душанбе, Таджикистан
                        </p>
                        <div className='mb-4 flex flex-wrap gap-2'>
                          <span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
                            Полный день
                          </span>
                          <span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
                            Опыт от 1 года
                          </span>
                        </div>
                      </div>
                      <Button variant='outline' size='sm'>
                        {t('common.buttons.apply')}
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>
          <TabsContent value='office' className='space-y-4'>
            {[
              'Менеджер по продажам',
              'Бухгалтер',
              'Специалист по логистике',
            ].map((job, index) => (
              <Card
                key={index}
                className='overflow-hidden transition-all hover:shadow-md'
                data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
              >
                <CardContent className='p-0'>
                  <div className='p-6'>
                    <div className='flex items-start justify-between'>
                      <div>
                        <h3 className='mb-2 text-lg font-bold'>{job}</h3>
                        <p className='mb-4 text-sm text-gray-500'>
                          Душанбе, Таджикистан
                        </p>
                        <div className='mb-4 flex flex-wrap gap-2'>
                          <span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
                            Полный день
                          </span>
                          <span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
                            Опыт от 1 года
                          </span>
                        </div>
                      </div>
                      <Button variant='outline' size='sm'>
                        {t('common.buttons.apply')}
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>
          <TabsContent value='stations' className='space-y-4'>
            {['Оператор АЗС', 'Заправщик', 'Менеджер станции'].map(
              (job, index) => (
                <Card
                  key={index}
                  className='overflow-hidden transition-all hover:shadow-md'
                  data-aos={index % 2 === 0 ? 'fade-right' : 'fade-left'}
                >
                  <CardContent className='p-0'>
                    <div className='p-6'>
                      <div className='flex items-start justify-between'>
                        <div>
                          <h3 className='mb-2 text-lg font-bold'>{job}</h3>
                          <p className='mb-4 text-sm text-gray-500'>
                            Душанбе, Таджикистан
                          </p>
                          <div className='mb-4 flex flex-wrap gap-2'>
                            <span className='inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800'>
                              Сменный график
                            </span>
                            <span className='inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800'>
                              Обучение
                            </span>
                          </div>
                        </div>
                        <Button variant='outline' size='sm'>
                          {t('common.buttons.apply')}
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ),
            )}
          </TabsContent>
        </Tabs>
      </div>
    </section>
  );
};