<script lang="ts">
	export type OutlineIconName =
		| 'home'
		| 'transaksi'
		| 'stok'
		| 'laporan'
		| 'paket'
		| 'panduan'
		| 'penjualan'
		| 'catatan'
		| 'hutang'
		| 'store'
		| 'plus'
		| 'arrow-left'
		| 'arrow-down'
		| 'arrow-up'
		| 'arrow-up-right'
		| 'arrow-down-left'
		| 'package'
		| 'user'
		| 'logout'
		| 'file'
		| 'clipboard'
		| 'warning'
		| 'check'
		| 'circle'
		| 'food'
		| 'drink'
		| 'snack'
		| 'cart'
		| 'chart'
		| 'lock'
		| 'edit'
		| 'location'
		| 'phone'
		| 'settings'
		| 'menu';

	interface Props {
		name: OutlineIconName;
		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
		filled?: boolean;
		class?: string;
	}

	let { name, size = 'md', filled = false, class: className = '' }: Props = $props();

	const sizeClass: Record<NonNullable<Props['size']>, string> = {
		xs: 'h-4 w-4',
		sm: 'h-5 w-5',
		md: 'h-6 w-6',
		lg: 'h-8 w-8',
		xl: 'h-12 w-12'
	};

	const strokeW = $derived(filled ? 2 : 2.25);
</script>

<svg
	class="{sizeClass[size]} {className}"
	viewBox="0 0 24 24"
	fill="none"
	stroke="currentColor"
	stroke-width={strokeW}
	aria-hidden="true"
>
	{#if name === 'home'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			fill={filled ? 'currentColor' : 'none'}
			d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9.5z"
		/>
	{:else if name === 'transaksi'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
		<rect
			x="9"
			y="3"
			width="6"
			height="4"
			rx="1"
			fill={filled ? 'currentColor' : 'none'}
			stroke="currentColor"
		/>
		<path stroke-linecap="round" d="M9 12h6M9 16h4" />
	{:else if name === 'stok'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			fill={filled ? 'currentColor' : 'none'}
			d="M21 8.5 12 3 3 8.5V18l9 5 9-5V8.5z"
		/>
		<path stroke-linecap="round" stroke-linejoin="round" d="M3 8.5 12 14l9-5.5M12 14v9" />
	{:else if name === 'laporan'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6" />
	{:else if name === 'paket'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			fill={filled ? 'currentColor' : 'none'}
			d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"
		/>
	{:else if name === 'panduan'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			fill={filled ? 'currentColor' : 'none'}
			d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
		/>
		<path stroke-linecap="round" d="M8 7h8M8 11h6" />
	{:else if name === 'penjualan'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"
		/>
	{:else if name === 'catatan'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"
		/>
		<path stroke-linecap="round" stroke-linejoin="round" d="M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 12h6M9 16h4" />
	{:else if name === 'hutang'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M17 20h5v-2a3 3 0 0 0-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 0 1 5.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 0 1 9.288 0M15 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"
		/>
	{:else if name === 'store'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5m-4 0h4"
		/>
	{:else if name === 'plus'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
	{:else if name === 'arrow-left'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0 7-7m-7 7h18" />
	{:else if name === 'arrow-down'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0-7-7m7 7V3" />
	{:else if name === 'arrow-up'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0 7 7m-7-7v18" />
	{:else if name === 'arrow-up-right'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M7 17 17 7M7 7h10v10" />
	{:else if name === 'arrow-down-left'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M17 17 7 7M7 17V7h10" />
	{:else if name === 'package'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.5 12 3 3 8.5V18l9 5 9-5V8.5z" />
		<path stroke-linecap="round" stroke-linejoin="round" d="M3 8.5 12 14l9-5.5" />
	{:else if name === 'user'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM12 14a7 7 0 0 0-7 7h14a7 7 0 0 0-7-7z" />
	{:else if name === 'logout'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M17 16l4-4m0 0-4-4m4 4H7m6 4v1a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1"
		/>
	{:else if name === 'file'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2z"
		/>
	{:else if name === 'clipboard'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
		<rect x="9" y="3" width="6" height="4" rx="1" stroke="currentColor" />
	{:else if name === 'warning'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
		/>
	{:else if name === 'check'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
	{:else if name === 'circle'}
		<circle cx="12" cy="12" r="9" />
	{:else if name === 'food'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M4 10h16M8 10V6a2 2 0 0 1 4 0v4M10 10v8M14 10v8M6 18h12" />
	{:else if name === 'drink'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M8 4h8l-1 14H9L8 4zM7 8h10" />
	{:else if name === 'snack'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M6 8h12v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zM9 8V6a3 3 0 0 1 6 0v2" />
	{:else if name === 'cart'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l3-8H6.4M7 13 5.4 5M7 13l-1.5 6M17 13l1.5 6M10 19a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm6 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
	{:else if name === 'chart'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6" />
	{:else if name === 'lock'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"
		/>
	{:else if name === 'edit'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M11 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-5m-1.414-9.414a2 2 0 1 1 2.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
		/>
	{:else if name === 'location'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM12 21s7-4.35 7-10a7 7 0 1 0-14 0c0 5.65 7 10 7 10z"
		/>
	{:else if name === 'phone'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M3 5a2 2 0 0 1 2-2h2.28a1 1 0 0 1 .948.684l1.12 3.358a1 1 0 0 1-.502 1.21l-1.62.81a11.05 11.05 0 0 0 5.516 5.516l.81-1.62a1 1 0 0 1 1.21-.502l3.358 1.12a1 1 0 0 1 .684.948V19a2 2 0 0 1-2 2h-1C9.716 21 3 14.284 3 6V5z"
		/>
	{:else if name === 'settings'}
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
		/>
		<circle cx="12" cy="12" r="3" />
	{:else if name === 'menu'}
		<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
	{/if}
</svg>
