import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { useDynamicSectors } from '@/hooks/useDynamicSectors.ts';
import SectionHeader from '@/components/layout/SectionHeader.tsx';
import { Container, Grid } from '@/components/ui/layout';
import SectorCard from '@/components/landing/SectorCard.tsx';

interface SectorsProps {
  onNavigateToMap: (sector?: string) => void;
}

const Sectors = ({ onNavigateToMap }: SectorsProps) => {
  const { t } = useTranslation();
  const { sectors: dynamicSectors, isLoading, error } = useDynamicSectors(6);

  return (
    <section
      className="bg-muted/50 min-h-screen flex items-center scroll-snap-align-start"
      aria-labelledby="sectors-title"
    >
      <Container className="py-16 sm:py-24 w-full">
        <SectionHeader
          id="sectors-title"
          title={t('sectors.title')}
          subtitle={t('sectors.subtitle')}
          className="mb-12 sm:mb-16"
        />
        <Grid cols={{ sm: 2, lg: 4 }} gap="lg">
          {isLoading ? (
            // Loading state - show skeleton placeholders
            Array.from({ length: 6 }, (_, i) => (
              <div key={i} className="animate-pulse">
                <div className="bg-muted rounded-lg p-6 h-32"></div>
              </div>
            ))
          ) : error ? (
            // Error state - show error message
            <div className="col-span-full text-center py-8">
              <p className="text-muted-foreground">{t('common.error')}</p>
            </div>
          ) : dynamicSectors.length === 0 ? (
            // Empty state - show loading until data arrives
            <div className="col-span-full text-center py-8">
              <p className="text-muted-foreground">Loading sectors...</p>
            </div>
          ) : (
            // Success state - use dynamic sectors
            dynamicSectors.map((sector) => (
              <SectorCard
                key={sector.backendName}
                sector={sector}
                onNavigateToMap={onNavigateToMap}
              />
            ))
          )}
        </Grid>
      </Container>
    </section>
  );
};

export default React.memo(Sectors);