'use client';

import { MapPin } from 'lucide-react';

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

import { Point } from '@/features/map/model';
import { YandexMap } from '@/features/map/ui/yandex-map';

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

interface MapSectionProps {
  stations: Stations;
}

export const MapSection = ({ stations }: MapSectionProps) => {
  const { t } = useTextController();

  const points = stations.map((st) => ({
    id: st.id,
    coordinates: [st.latitude, st.longitude],
  })) as Point[];

  return (
    <section id='stations' className='bg-gray-50 px-2 py-8 sm:py-16'>
      <div className='container mx-auto'>
        <YandexMap points={points} />
        <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'>
            <MapPin className='h-6 w-6 text-red-600' />
          </div>
          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
            {t('home.stations.title')}
          </h2>
          <p className='max-w-2xl text-gray-600'>
            {t('home.stations.description')}
          </p>
        </div>
        <div
          className='h-[500px] overflow-hidden rounded-xl border shadow-lg'
          data-aos='fade-up'
        >
          {/* <GasStationMap stations={stations} /> */}
        </div>
      </div>
    </section>
  );
};