'use client';

import Link from 'next/link';
import { ReactNode } from 'react';

interface NavButtonProps {
    icon: ReactNode;
    label: string;
    href: string;
    badge?: number;
}

export default function NavButton({ icon, label, href, badge }: NavButtonProps) {
    return (
        <Link
            href={href}
            className="flex flex-col items-center justify-center gap-1.5 p-3 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 rounded-xl transition-all active:scale-95"
        >
            <div className="relative text-zinc-400">
                {icon}
                {badge !== undefined && badge > 0 && (
                    <span className="absolute -top-1 -right-1 w-4 h-4 bg-orange-600 rounded-full text-[8px] font-black text-white flex items-center justify-center">
                        {badge > 9 ? '9+' : badge}
                    </span>
                )}
            </div>
            <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-wide">
                {label}
            </span>
        </Link>
    );
}
