import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { ChevronRight, Home as HomeIcon } from 'lucide-react'
import { getLocaleFromPathname, withLocalePath } from '../lib/i18n'

export type BreadcrumbItem = {
  label: string
  href?: string
}

type BreadcrumbsProps = {
  items: BreadcrumbItem[]
  className?: string
}

export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) => {
  const location = useLocation()
  const locale = getLocaleFromPathname(location.pathname)

  return (
    <nav aria-label={locale === 'en' ? 'Breadcrumb' : '面包屑导航'} className={className}>
      <ol className="flex flex-wrap items-center gap-1 text-sm text-white/85">
        <li className="flex items-center gap-1">
          <Link
            to={withLocalePath(locale, '/')}
            className="inline-flex items-center gap-1 rounded-md px-2 py-1 hover:bg-white/10 hover:text-white transition-colors"
            aria-label={locale === 'en' ? 'Go to homepage' : '返回首页'}
          >
            <HomeIcon size={16} />
            <span>{locale === 'en' ? 'Home' : '首页'}</span>
          </Link>
        </li>

        {items.map((item, index) => {
          const isLast = index === items.length - 1

          return (
            <React.Fragment key={`${item.label}-${index}`}>
              <li aria-hidden="true" className="text-white/50">
                <ChevronRight size={16} />
              </li>
              <li className="flex items-center">
                {item.href && !isLast ? (
                  <Link
                    to={withLocalePath(locale, item.href)}
                    className="rounded-md px-2 py-1 hover:bg-white/10 hover:text-white transition-colors"
                  >
                    {item.label}
                  </Link>
                ) : (
                  <span className="px-2 py-1 text-white font-medium" aria-current={isLast ? 'page' : undefined}>
                    {item.label}
                  </span>
                )}
              </li>
            </React.Fragment>
          )
        })}
      </ol>
    </nav>
  )
}

export default Breadcrumbs
