'use client';

import { ChevronDown } from 'lucide-react';

interface NavigationItemProps {
    label: string;
    href: string;
    current: boolean;
    hasDropdown?: boolean;
    isDropdownOpen?: boolean;
    onKeyDown?: (event: React.KeyboardEvent) => void;
}

export function NavigationItem({
    label,
    href,
    current,
    hasDropdown = false,
    isDropdownOpen = false,
    onKeyDown,
}: NavigationItemProps) {
    const baseClasses =
        'relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-amber-900 min-h-[44px]';

    const currentClasses = current
        ? 'bg-amber-800 text-yellow-300 shadow-md'
        : 'text-yellow-100 hover:text-yellow-300 hover:bg-amber-800/50';

    const dropdownClasses = isDropdownOpen ? 'bg-amber-800/50' : '';

    return (
        <a
            href={href}
            className={`${baseClasses} ${currentClasses} ${dropdownClasses}`}
            aria-current={current ? 'page' : undefined}
            onKeyDown={onKeyDown}
            role={hasDropdown ? 'button' : 'link'}
            aria-expanded={hasDropdown ? isDropdownOpen : undefined}
            aria-haspopup={hasDropdown ? 'menu' : undefined}
        >
            <span className="flex items-center space-x-2">
                <span>{label}</span>
                {hasDropdown && (
                    <ChevronDown
                        className={`w-4 h-4 transition-transform duration-200 ${
                            isDropdownOpen ? 'rotate-180' : ''
                        }`}
                        aria-hidden="true"
                    />
                )}
            </span>

            {/* Current page indicator */}
            {current && (
                <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-8 h-0.5 bg-yellow-300 rounded-full" />
            )}
        </a>
    );
}