// src/features/legislativas/nacionales/components/Breadcrumbs.tsx
import { FiHome, FiChevronRight } from 'react-icons/fi';

interface BreadcrumbsProps {
  nivel: 'pais' | 'provincia' | 'municipio';
  nombreAmbito: string;
  nombreProvincia?: string;
  onReset: () => void;
  onVolverProvincia: () => void;
}

export const Breadcrumbs = ({ nivel, nombreAmbito, nombreProvincia, onReset, onVolverProvincia }: BreadcrumbsProps) => {
  return (
    <nav className="breadcrumbs-container">
      {nivel !== 'pais' ? (
        <>
          <button onClick={onReset} className="breadcrumb-item">
            <FiHome className="breadcrumb-icon" />
            <span>Argentina</span>
          </button>
          <FiChevronRight className="breadcrumb-separator" />
        </>
      ) : (
        <div className="breadcrumb-item-actual">
          <FiHome className="breadcrumb-icon" />
          <span>{nombreAmbito}</span>
        </div>
      )}
      
      {nivel === 'provincia' && (
        <div className="breadcrumb-item-actual">
          <span>{nombreAmbito}</span>
        </div>
      )}

      {nivel === 'municipio' && nombreProvincia && (
        <>
          <button onClick={onVolverProvincia} className="breadcrumb-item">
            <span>{nombreProvincia}</span>
          </button>
          <FiChevronRight className="breadcrumb-separator" />
          <div className="breadcrumb-item-actual">
            <span>{nombreAmbito}</span>
          </div>
        </>
      )}
    </nav>
  );
};