'use client';

import * as React from 'react';
import { Home } from 'lucide-react';
import Link from 'next/link';

type BreadcrumbItem = {
  label: string;
  href: string;
};

export default function ProductCategoryBreadcrumbs() {
  const breadcrumbs: BreadcrumbItem[] = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
  ];

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
  };

  return (
    <nav className='flex items-center justify-center gap-2'>
      {breadcrumbs.length > 0 && (
        <>
          <Link href='/' onClick={handleClick}>
            <Home className='text-text-soft-400 hover:text-text-sub-600 size-4' />
          </Link>
          <span className='text-label-xs text-text-soft-400 cursor-default'>
            /
          </span>
        </>
      )}

      {breadcrumbs.map((item, index) => (
        <React.Fragment key={item.href}>
          {index > 0 && breadcrumbs[index - 1] && (
            <span className='text-label-xs text-text-soft-400 cursor-default'>
              /
            </span>
          )}
          <a
            href={item.href}
            className='text-label-xs text-text-soft-400 hover:text-text-sub-600'
            onClick={handleClick}
          >
            {item.label}
          </a>
        </React.Fragment>
      ))}
    </nav>
  );
}