import React, { useCallback } from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Sector } from '@/types.ts';
import { Card } from '@/components/ui/Card.tsx';

interface SectorCardProps {
  sector: Sector;
  onNavigateToMap: (sectorName: string) => void;
}

const SectorCard: React.FC<SectorCardProps> = ({ sector, onNavigateToMap }) => {
  const { t } = useTranslation();

  // Use backendName if available (for dynamic sectors), otherwise use the nameKey directly
  const backendSectorKey = sector.backendName || sector.nameKey;

  const handleClick = useCallback(() => {
    onNavigateToMap(backendSectorKey);
  }, [onNavigateToMap, backendSectorKey]);

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        onNavigateToMap(backendSectorKey);
      }
    },
    [onNavigateToMap, backendSectorKey]
  );

  return (
    <Card
      as="button"
      variant="interactive"
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      className="p-6 flex flex-col items-start text-left group"
    >
      <div
        className={`h-12 w-12 rounded-lg flex items-center justify-center bg-sector-${sector.colorKey}/10 mb-4 group-hover:bg-sector-${sector.colorKey}/20 transition-colors duration-300`}
      >
        {React.cloneElement(sector.icon, { className: `h-7 w-7 text-sector-${sector.colorKey}` })}
      </div>
      <p className="font-semibold text-lg mb-1">{t(`${sector.nameKey}.name`)}</p>
      <p className="text-sm text-muted-foreground">{t(`${sector.nameKey}.desc`)}</p>
    </Card>
  );
};

export default SectorCard;