import React from 'react';
import Link from 'next/link';
import { ChevronRight, Home } from 'lucide-react';

export interface BreadcrumbItem {
  label: string;
  url?: string;
}

export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  const schemaBreadcrumbs = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      item: item.url ? `https://indianbooksworldwide.com${item.url}` : undefined,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaBreadcrumbs) }}
      />

      <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 text-xs text-zinc-500 font-medium py-2">
        <Link href="/" className="hover:text-saffron-600 flex items-center gap-1">
          <Home className="w-3.5 h-3.5" /> Home
        </Link>

        {items.map((item, idx) => (
          <React.Fragment key={idx}>
            <ChevronRight className="w-3.5 h-3.5 text-zinc-400 shrink-0" />
            {item.url ? (
              <Link href={item.url} className="hover:text-saffron-600">
                {item.label}
              </Link>
            ) : (
              <span className="text-zinc-900 dark:text-zinc-100 font-bold">{item.label}</span>
            )}
          </React.Fragment>
        ))}
      </nav>
    </>
  );
}