'use client';

import * as React from 'react';
import Link from 'next/link';

type BreadcrumbItem = {
  label: string;
  href: string;
};
const Separator = () => (
  <div className='relative flex size-1 items-center justify-center'>
    <div className='border-stroke-soft-200 bg-bg-white-0 absolute inset-0 rounded-full border'></div>
  </div>
);

export default function ProductSlashBreadcrumbs() {
  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 gap-2'>
      {breadcrumbs.map((item, index) => (
        <React.Fragment key={item.href}>
          <Link
            href={item.href}
            onClick={handleClick}
            className='bg-bg-weak-50 text-label-xs text-text-sub-600 hover:bg-primary-alpha/10 hover:text-primary-base rounded-full px-2.5 py-1 transition-colors'
          >
            {item.label}
          </Link>
          {index < breadcrumbs.length - 1 && <Separator />}
        </React.Fragment>
      ))}
    </nav>
  );
}