// src/features/legislativas/nacionales/components/Breadcrumbs.tsx
import { FiHome, FiChevronRight } from 'react-icons/fi';
// 1. Importamos el archivo de estilos como un módulo CSS
import styles from '../PanelNacional.module.css';

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

export const Breadcrumbs = ({ nivel, nombreAmbito, nombreProvincia, onReset, onVolverProvincia }: BreadcrumbsProps) => {
  // 2. Todas las props 'className' ahora usan el objeto 'styles'
  return (
    <nav className={styles.breadcrumbsContainer}>
      {nivel !== 'pais' ? (
        <>
          <button onClick={onReset} className={styles.breadcrumbItem}>
            <FiHome className={styles.breadcrumbIcon} />
            <span>Argentina</span>
          </button>
          <FiChevronRight className={styles.breadcrumbSeparator} />
        </>
      ) : (
        <div className={styles.breadcrumbItemActual}>
          <FiHome className={styles.breadcrumbIcon} />
          <span>{nombreAmbito}</span>
        </div>
      )}
      
      {nivel === 'provincia' && (
        <div className={styles.breadcrumbItemActual}>
          <span>{nombreAmbito}</span>
        </div>
      )}

      {nivel === 'municipio' && nombreProvincia && (
        <>
          <button onClick={onVolverProvincia} className={styles.breadcrumbItem}>
            <span>{nombreProvincia}</span>
          </button>
          <FiChevronRight className={styles.breadcrumbSeparator} />
          <div className={styles.breadcrumbItemActual}>
            <span>{nombreAmbito}</span>
          </div>
        </>
      )}
    </nav>
  );
};