'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ChevronRight, Home } from 'lucide-react'

export function PortalBreadcrumbs() {
  const pathname = usePathname()
  
  const segments = pathname.split('/').filter(Boolean)
  if (segments.length <= 1) return null

  return (
    <nav
      aria-label="Breadcrumb"
      className="flex items-center space-x-2 text-sm text-gray-400 px-4 py-2 bg-gray-900 border-b border-gray-800"
    >
      <Link
        href="/"
        className="hover:text-orange-500 transition-colors"
        aria-label="Home"
      >
        <Home className="h-4 w-4" />
      </Link>
      
      {segments.map((segment, index) => {
        const isLast = index === segments.length - 1
        const href = '/' + segments.slice(0, index + 1).join('/')
        const label = segment
          .split('-')
          .map(word => word.charAt(0).toUpperCase() + word.slice(1))
          .join(' ')
        
        return (
          <div key={href} className="flex items-center space-x-2">
            <ChevronRight className="h-4 w-4 text-gray-600" />
            {isLast ? (
              <span className="text-white font-medium" aria-current="page">
                {label}
              </span>
            ) : (
              <Link
                href={href}
                className="hover:text-orange-500 transition-colors"
              >
                {label}
              </Link>
            )}
          </div>
        )
      })}
    </nav>
  )
}

