import Link from "next/link";
import { Badge } from "@/components/ui/badge";

export type DropdownLinkItem = {
	href: string;
	label: string;
	icon: React.ReactNode;
	badge?: number;
};

type DropdownLinkListProps = {
	items: DropdownLinkItem[];
};

export function DropdownLinkList({ items }: DropdownLinkListProps) {
	return (
		<ul className="grid w-48 gap-0.5 p-2">
			{items.map((item) => (
				<li key={item.href}>
					<Link
						href={item.href}
						className="flex items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
					>
						<span className="text-muted-foreground shrink-0">{item.icon}</span>
						<span className="flex-1">{item.label}</span>
						{item.badge && item.badge > 0 ? (
							<Badge
								variant="secondary"
								className="text-[10px] px-1.5 py-0 h-4 min-w-4 ml-auto"
							>
								{item.badge}
							</Badge>
						) : null}
					</Link>
				</li>
			))}
		</ul>
	);
}