'use client';

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

interface BreadcrumbItem {
    label: string;
    href?: string;
}

export function Breadcrumb() {
    const pathname = usePathname();

    // Generate breadcrumb items from pathname
    const generateBreadcrumbs = (): BreadcrumbItem[] => {
        const paths = pathname.split('/').filter(Boolean);
        const breadcrumbs: BreadcrumbItem[] = [{ label: 'Home', href: '/' }];

        let currentPath = '';
        paths.forEach((path, index) => {
            currentPath += `/${path}`;

            // Format label (remove hyphens, capitalize)
            const label = path
                .split('-')
                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');

            // Only add href if not last item
            breadcrumbs.push({
                label,
                href: index === paths.length - 1 ? undefined : currentPath,
            });
        });

        return breadcrumbs;
    };

    const breadcrumbs = generateBreadcrumbs();

    if (breadcrumbs.length <= 1) return null;

    return (
        <nav aria-label="Breadcrumb" className="mb-4">
            <ol className="flex items-center gap-2 text-sm">
                {breadcrumbs.map((breadcrumb, index) => (
                    <li key={index} className="flex items-center gap-2">
                        {index > 0 && (
                            <ChevronRight className="h-4 w-4 text-slate-400" aria-hidden="true" />
                        )}
                        {breadcrumb.href ? (
                            <Link
                                href={breadcrumb.href}
                                className="flex items-center gap-1 text-slate-600 transition-colors hover:text-brand dark:text-slate-400 dark:hover:text-brand"
                            >
                                {index === 0 && <Home className="h-4 w-4" />}
                                {breadcrumb.label}
                            </Link>
                        ) : (
                            <span className="flex items-center gap-1 font-medium text-slate-900 dark:text-white">
                                {breadcrumb.label}
                            </span>
                        )}
                    </li>
                ))}
            </ol>
        </nav>
    );
}