import Link from 'next/link';
import { IBreadcrumbProps } from './breadcrumb';

export default function Breadcrumb({ items }: IBreadcrumbProps) {
  return (
    <nav aria-label="breadcrumb">
      <div className="flex items-center gap-2">
        {items.map((item, index) => (
          <div key={index} className="flex items-center gap-2">
            {index > 0 && (
              <span className="text-sm font-normal text-gray-300">⦁</span>
            )}
            {item.href ? (
              <Link
                href={item.href}
                className="text-base font-normal text-gray-300"
              >
                {item.title}
              </Link>
            ) : (
              <span className="text-primary text-base font-bold">
                {item.title}
              </span>
            )}
          </div>
        ))}
      </div>
    </nav>
  );
}
