import { forwardRef } from 'react'
import classNames from 'classnames'
import { HiChevronRight, HiFolder, HiHome } from 'react-icons/hi2'
import type { BreadcrumbItem } from '@/types/fileManagement'

export interface BreadcrumbProps {
  items: BreadcrumbItem[]
  onNavigate: (item: BreadcrumbItem) => void
  className?: string
}

const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
  const { items, onNavigate, className } = props

  return (
    <div ref={ref} className={classNames('flex items-center space-x-1 text-sm', className)}>
      {items.map((item, index) => (
        <div key={item.path} className="flex items-center">
          {index > 0 && <HiChevronRight className="mx-2 h-4 w-4 text-gray-400" />}
          <button
            onClick={() => onNavigate(item)}
            className={classNames(
              'flex items-center px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors',
              index === items.length - 1
                ? 'text-gray-900 dark:text-gray-100 font-medium cursor-default'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100',
            )}
            disabled={index === items.length - 1}
          >
            {index === 0 ? (
              <HiHome className="h-4 w-4 mr-1" />
            ) : (
              <HiFolder className="h-4 w-4 mr-1" />
            )}
            <span className="truncate max-w-32">{item.name}</span>
          </button>
        </div>
      ))}
    </div>
  )
})

Breadcrumb.displayName = 'Breadcrumb'

export default Breadcrumb