/* ====================================================
 * Breadcrumb Component
 * Schema.org structured breadcrumb navigation
 * ==================================================== */

'use client';

import Link from 'next/link';
import { HiChevronRight, HiHome } from 'react-icons/hi';
import { breadcrumbSchema } from '@/utils/seo';

interface BreadcrumbItem {
  label: string;
  href: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  const allItems = [{ label: 'Trang chủ', href: '/' }, ...items];
  const schema = breadcrumbSchema(allItems.map(i => ({ name: i.label, url: i.href })));

  return (
    <>
      {/* Schema.org JSON-LD */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />

      {/* Breadcrumb UI */}
      <nav
        aria-label="Breadcrumb"
        className="bg-surface-50 border-b border-surface-200"
      >
        <div className="container-custom py-3">
          <ol className="flex items-center flex-wrap gap-1 text-sm">
            {allItems.map((item, index) => {
              const isLast = index === allItems.length - 1;
              return (
                <li key={item.href} className="flex items-center gap-1">
                  {index > 0 && (
                    <HiChevronRight className="w-4 h-4 text-dark-300" />
                  )}
                  {isLast ? (
                    <span className="text-primary-600 font-medium">
                      {item.label}
                    </span>
                  ) : (
                    <Link
                      href={item.href}
                      className="flex items-center gap-1 text-dark-400 hover:text-primary-500 transition-colors"
                    >
                      {index === 0 && <HiHome className="w-4 h-4" />}
                      {item.label}
                    </Link>
                  )}
                </li>
              );
            })}
          </ol>
        </div>
      </nav>
    </>
  );
}