import { Link } from '@inertiajs/react';
import React from 'react';
import { Can } from '@/Components/Can';

interface NavigationItemProps {
    href: string;
    active: boolean;
    icon: React.ReactNode;
    label: string;
    ability?: string | string[];
}

export function NavigationItem({ href, active, icon, label, ability }: NavigationItemProps) {
    const content = (
        <Link
            href={href}
            className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                active 
                    ? 'bg-[var(--color-primary-50)] text-[var(--color-primary-600)]' 
                    : 'text-gray-600 hover:bg-gray-100'
            }`}
        >
            <div className="w-5 h-5 flex items-center justify-center">
                {icon}
            </div>
            <span className="font-medium hidden md:block">{label}</span>
        </Link>
    );

    if (ability) {
        return <Can ability={ability}>{content}</Can>;
    }

    return content;
}