---
interface Breadcrumb {
  label: string;
  href?: string;
  current?: boolean;
}

interface Props {
  items: Breadcrumb[];
  variant?: 'default' | 'minimal' | 'withHome';
  separator?: 'chevron' | 'slash' | 'dot';
}

const {
  items,
  variant = 'default',
  separator = 'chevron'
}: Props = Astro.props;

// Добавляем домашнюю страницу, если указан вариант withHome
const breadcrumbs = variant === 'withHome' && items[0]?.href !== '/'
  ? [{ label: 'Home', href: '/' }, ...items]
  : items;
---

<nav aria-label="Breadcrumb" class="py-0.2 px-0">
  <ol class="flex flex-wrap items-center text-sm">
    {breadcrumbs.map((item, index) => {
      const isLast = index === breadcrumbs.length - 1;
      const showSeparator = index < breadcrumbs.length - 1;

      return (
        <li class="flex items-center" key={index}>
          {item.href && !isLast ? (
            <a
              href={item.href}
              class="text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-200 font-medium"
            >
              {item.label}
            </a>
          ) : (
            <span class={`font-medium ${isLast ? 'text-gray-900' : 'text-gray-500'}`}>
              {item.label}
            </span>
          )}

          {showSeparator && (
            <span class="mx-2 text-gray-400" aria-hidden="true">
              {separator === 'chevron' && (
                <svg
                  class="w-4 h-4 inline-block"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
              )}
              {separator === 'slash' && <span>/</span>}
              {separator === 'dot' && <span>•</span>}
            </span>
          )}
        </li>
      );
    })}
  </ol>
</nav>