import Link from 'next/link';
import { SITE_URL } from '../lib/seo';

export interface Crumb {
  name: string;
  href?: string;
}

export function breadcrumbsJsonLd(items: Crumb[]) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      ...(item.href
        ? { item: item.href.startsWith('http') ? item.href : `${SITE_URL}${item.href}` }
        : {}),
    })),
  };
}

const Breadcrumbs: React.FC<{ items: Crumb[] }> = ({ items }) => {
  return (
    <nav aria-label="Drobečková navigace" className="mb-6 md:mb-8">
      <ol className="flex flex-wrap items-center gap-1.5 text-xs sm:text-sm text-luxury-light/50">
        {items.map((item, index) => (
          <li key={`${item.name}-${index}`} className="flex items-center gap-1.5">
            {index > 0 && <span className="text-luxury-gold/40">/</span>}
            {item.href ? (
              <Link href={item.href} className="hover:text-luxury-gold transition-colors">
                {item.name}
              </Link>
            ) : (
              <span className="text-luxury-light/80">{item.name}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
};

export default Breadcrumbs;