'use client';
import Link from 'next/link';
import { FaHouse, FaAngleRight } from 'react-icons/fa6';

interface BreadcrumbItem {
  name: string | undefined;
  url: string | undefined;
}

export const Breadcrumb = ({ items }: { items: BreadcrumbItem[] }) => {
  return (
    <nav className="box-breadcrumb-global mb-4 text-sm text-gray-600">
      <ol itemScope itemType="http://schema.org/BreadcrumbList" className="flex gap-2">
        <li
          itemProp="itemListElement"
          itemScope
          itemType="http://schema.org/ListItem"
          className="flex items-center gap-2"
        >
          <Link href="/" itemProp="item">
            <span itemProp="name" className="flex items-center gap-2">
              <span style={{ fontSize: 0 }}>Trang chủ</span> <FaHouse className="text-gray-700" />
            </span>
          </Link>{' '}
          <FaAngleRight className="text-gray-700" />
          <meta itemProp="position" content="1" />
        </li>
        {items.map((item, idx) => (
          <li
            key={idx}
            itemProp="itemListElement"
            itemScope
            itemType="http://schema.org/ListItem"
            className="flex items-center"
          >
            <Link href={item.url ?? '/'} itemProp="item">
              <span itemProp="name">{item?.name}</span>
            </Link>
            <meta itemProp="position" content={(idx + 1).toString()} />
            {idx < items.length - 1 && <span className="mx-1">/</span>}
          </li>
        ))}
      </ol>
    </nav>
  );
};