import { Icon } from '../../Atoms/Icon/Icon';

export const Breadcrumbs = ({
  items = [],
  separator = '/',
  className = '',
  ...props
}) => {
  if (items.length === 0) return null;

  return (
    <nav className={className} aria-label="Breadcrumb" {...props}>
      <ol className="flex items-center space-x-2">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} className="flex items-center">
              {index > 0 && (
                <span className="mx-2 text-gray-400">
                  {separator === 'icon' ? (
                    <Icon name="ChevronRightIcon" className="h-4 w-4" />
                  ) : (
                    separator
                  )}
                </span>
              )}
              {isLast ? (
                <span className="text-gray-500 font-medium" aria-current="page">
                  {item.label}
                </span>
              ) : (
                <a
                  href={item.href || '#'}
                  className="text-gray-500 hover:text-gray-700"
                  onClick={item.onClick}
                >
                  {item.label}
                </a>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;

