
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { ChevronRight, Home } from 'lucide-react';

const routeNameMap = {
  'crm': 'CRM',
  'sales': 'Ventes',
  'purchases': 'Achats',
  'support': 'SAV',
  'admin': 'Administration',
  'prospects': 'Prospects',
  'clients': 'Clients',
  'suppliers': 'Fournisseurs',
  'opportunities': 'Opportunités',
  'quotes': 'Devis',
  'orders': 'Commandes',
  'delivery-notes': 'Bons de livraison',
  'invoices': 'Factures',
  'credit-notes': 'Avoirs',
  'tickets': 'Tickets',
  'dashboard': 'Tableau de bord',
  'users': 'Utilisateurs',
  'settings': 'Paramètres',
  'profile': 'Profil',
  'preferences': 'Préférences'
};

const Breadcrumbs = () => {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter((x) => x);

  if (pathnames.length === 0) return null;

  return (
    <nav className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
      <Link to="/" className="hover:text-gray-900 dark:hover:text-white transition-colors">
        <Home className="w-4 h-4" />
      </Link>
      {pathnames.map((value, index) => {
        const to = `/${pathnames.slice(0, index + 1).join('/')}`;
        const isLast = index === pathnames.length - 1;
        const name = routeNameMap[value] || value;
        
        return (
          <React.Fragment key={to}>
            <ChevronRight className="w-4 h-4 mx-2" />
            {isLast ? (
              <span className="font-medium text-gray-900 dark:text-white capitalize">
                {name}
              </span>
            ) : (
              <Link to={to} className="hover:text-gray-900 dark:hover:text-white transition-colors capitalize">
                {name}
              </Link>
            )}
          </React.Fragment>
        );
      })}
    </nav>
  );
};

export default Breadcrumbs;
