import {ReactNode} from 'react'
import Link from 'next/link'

export type BreadCrumbItem = {
  label: string
  href?: string
  onClick?: () => void
}

export type BreadCrumbProps = {
  items: BreadCrumbItem[]
  divider?: ReactNode
  showHomeIcon?: boolean
  className?: string
}

export default function BreadCrumb({
  items,
  divider = '/',
  showHomeIcon = true,
  className = '',
}: BreadCrumbProps) {
  return (
    <nav className={`flex items-center text-sm ${className}`} aria-label="Breadcrumb">
      <ol className="flex items-center space-x-2">
        {showHomeIcon && (
          <li className="flex items-center">
            <Link href="/" className="text-gray-500 hover:text-gray-700 transition-colors">
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
              </svg>
            </Link>
          </li>
        )}

        {items.map((item, index) => (
          <li key={index} className="flex items-center">
            {index > 0 || showHomeIcon ? (
              <span className="mx-2 text-gray-400">{divider}</span>
            ) : null}

            {item.href ? (
              <Link
                href={item.href}
                className="text-gray-600 hover:text-blue-600 transition-colors"
                onClick={item.onClick}
              >
                {item.label}
              </Link>
            ) : (
              <span
                className="text-gray-900"
                onClick={item.onClick}
              >
                {item.label}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}
