<script lang="ts">
	import { 
		Settings, Package, Truck, Construction, 
		TrendingUp, FileText, ClipboardList, Database,
		ChevronRight, Layers
	} from 'lucide-svelte';
	import { fade, slide } from 'svelte/transition';

	export let activeCategory: string;
	export let onSelect: (cat: string) => void;

	const groups = [
		{
			title: 'SCAII (Inventarios)',
			icon: Package,
			items: [
				{ id: 'ssisgen', label: 'Parámetros Generales', icon: Settings },
				{ id: 'ssisgen2', label: 'Valor Agregado', icon: TrendingUp },
				{ id: 'ssisgen3', label: 'Otros Parámetros', icon: ClipboardList },
				{ id: 'ssismex', label: 'Nacional (MEX)', icon: FileText },
				{ id: 'ssisdef', label: 'Imp. Definitiva', icon: Truck },
				{ id: 'ssisimpo', label: 'Imp. Temporal', icon: Database },
				{ id: 'ssisexpo', label: 'Exportación', icon: Construction },
			]
		},
		{
			title: 'SCAF (Activos Fijos)',
			icon: Layers,
			items: [
				{ id: 'qsisgen', label: 'General Activos', icon: Settings },
				{ id: 'qsiscmex', label: 'Mantenimiento EX', icon: FileText },
				{ id: 'qsisdef', label: 'Imp. Definitiva', icon: Truck },
				{ id: 'qsisimpo', label: 'Imp. Temporal', icon: Database },
				{ id: 'qsisexpo', label: 'Exportación', icon: Construction },
				{ id: 'qsisimporep', label: 'Rep. Importación', icon: ClipboardList },
				{ id: 'qsisexporep', label: 'Rep. Exportación', icon: ClipboardList },
			]
		}
	];
</script>

<div class="space-y-6">
	{#each groups as group}
		<div class="space-y-2">
			<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground px-4 flex items-center gap-2">
				<svelte:component this={group.icon} class="w-3 h-3" />
				{group.title}
			</h3>
			<div class="space-y-1">
				{#each group.items as item}
					<button
						class="w-full flex items-center justify-between gap-3 px-4 py-2.5 rounded-lg transition-all group
							{activeCategory === item.id 
								? 'bg-primary/10 text-primary border border-primary/20 shadow-lg shadow-primary/5' 
								: 'text-white/60 hover:bg-white/5 border border-transparent hover:border-white/5'}"
						onclick={() => onSelect(item.id)}
					>
						<div class="flex items-center gap-3">
							<svelte:component this={item.icon} class="w-4 h-4 {activeCategory === item.id ? 'text-primary' : 'text-white/40 group-hover:text-white/60'}" />
							<span class="text-sm font-medium">{item.label}</span>
						</div>
						{#if activeCategory === item.id}
							<div in:fade>
								<ChevronRight class="w-4 h-4 text-primary" />
							</div>
						{/if}
					</button>
				{/each}
			</div>
		</div>
	{/each}
</div>
