'use client';

import * as React from 'react';
import Link from 'next/link';
import { type Icon } from '@tabler/icons-react';

import { Badge } from '@nice/ui/components/badge';
import {
	SidebarGroup,
	SidebarGroupContent,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
} from '@nice/ui/components/sidebar';

interface SecondaryItem {
	title: string;
	url: string;
	icon: Icon;
	badge?: string;
}

export function NavSecondary({
	items,
	...props
}: {
	items: SecondaryItem[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
	return (
		<SidebarGroup {...props}>
			<SidebarGroupContent>
				<SidebarMenu>
					{items.map((item) => (
						<SidebarMenuItem key={item.title}>
							<SidebarMenuButton asChild>
								<Link href={item.url} className="flex items-center justify-between">
									<div className="flex items-center gap-3">
										<item.icon />
										<span>{item.title}</span>
									</div>
									{item.badge && (
										<Badge variant="secondary" className="ml-auto text-xs">
											{item.badge}
										</Badge>
									)}
								</Link>
							</SidebarMenuButton>
						</SidebarMenuItem>
					))}
				</SidebarMenu>
			</SidebarGroupContent>
		</SidebarGroup>
	);
}