<script lang="ts">
	interface Props {
		name:
			| 'customers'
			| 'accounts'
			| 'services'
			| 'projects'
			| 'scopes'
			| 'reports'
			| 'invoices'
			| 'calendar'
			| 'history';
		class?: string;
	}

	let { name, class: className = 'h-5 w-5' }: Props = $props();
</script>

{#if name === 'customers'}
	<!-- Single building -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Main building -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M4 21V6a1 1 0 011-1h14a1 1 0 011 1v15"
		/>
		<!-- Roof -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 21h20" />
		<!-- Windows row 1 -->
		<rect x="7" y="8" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
		<rect x="14.5" y="8" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
		<!-- Windows row 2 -->
		<rect x="7" y="13" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
		<rect x="14.5" y="13" width="2.5" height="2.5" rx="0.3" stroke-width="1.5" />
		<!-- Door -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M10 21v-4a2 2 0 012-2v0a2 2 0 012 2v4"
		/>
	</svg>
{:else if name === 'accounts'}
	<!-- Multiple buildings -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Back building (taller) -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M14 21V4a1 1 0 011-1h6a1 1 0 011 1v17"
		/>
		<!-- Back building windows -->
		<path stroke-linecap="round" stroke-width="1.5" d="M17 6h2M17 9h2M17 12h2M17 15h2M17 18h2" />
		<!-- Front building (shorter) -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M2 21V9a1 1 0 011-1h10a1 1 0 011 1v12"
		/>
		<!-- Front building windows -->
		<rect x="4" y="11" width="2" height="2" rx="0.3" stroke-width="1.5" />
		<rect x="9" y="11" width="2" height="2" rx="0.3" stroke-width="1.5" />
		<rect x="4" y="16" width="2" height="2" rx="0.3" stroke-width="1.5" />
		<rect x="9" y="16" width="2" height="2" rx="0.3" stroke-width="1.5" />
		<!-- Ground line -->
		<path stroke-linecap="round" stroke-width="1.5" d="M1 21h22" />
	</svg>
{:else if name === 'services'}
	<!-- Broom sweeping -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Handle -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2v10" />
		<!-- Broom head binding -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M8 12h8a1 1 0 011 1v1H7v-1a1 1 0 011-1z"
		/>
		<!-- Bristles -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M7 14l-1 8M9.5 14l-.5 8M12 14v8M14.5 14l.5 8M17 14l1 8"
		/>
		<!-- Sweep motion lines -->
		<path stroke-linecap="round" stroke-width="1.5" d="M3 18l2 1M3 21l2-0.5" />
	</svg>
{:else if name === 'projects'}
	<!-- Floor buffer/polisher - side view -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Long handle -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 3l8 10" />
		<!-- Handle grip -->
		<path stroke-linecap="round" stroke-width="1.5" d="M3 2l2 2" />
		<!-- Motor/body housing -->
		<ellipse cx="14" cy="14" rx="4" ry="2.5" stroke-width="1.5" />
		<!-- Rotating pad base -->
		<ellipse cx="14" cy="19" rx="6" ry="2" stroke-width="1.5" />
		<!-- Connection shaft -->
		<path stroke-linecap="round" stroke-width="1.5" d="M14 16.5v.5" />
		<!-- Floor line -->
		<path stroke-linecap="round" stroke-width="1.5" d="M6 21h16" />
		<!-- Motion arcs -->
		<path stroke-linecap="round" stroke-width="1.5" d="M7 19.5c1-.8 2-.8 3 0" />
	</svg>
{:else if name === 'scopes'}
	<!-- Checklist -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Paper/document -->
		<rect x="4" y="2" width="16" height="20" rx="2" stroke-width="1.5" />
		<!-- Checkbox 1 with check -->
		<rect x="7" y="6" width="3" height="3" rx="0.5" stroke-width="1.5" />
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 7.5l1 1 2-2" />
		<path stroke-linecap="round" stroke-width="1.5" d="M13 7.5h4" />
		<!-- Checkbox 2 with check -->
		<rect x="7" y="11" width="3" height="3" rx="0.5" stroke-width="1.5" />
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 12.5l1 1 2-2" />
		<path stroke-linecap="round" stroke-width="1.5" d="M13 12.5h4" />
		<!-- Checkbox 3 empty -->
		<rect x="7" y="16" width="3" height="3" rx="0.5" stroke-width="1.5" />
		<path stroke-linecap="round" stroke-width="1.5" d="M13 17.5h4" />
	</svg>
{:else if name === 'reports'}
	<!-- Bar chart -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Axis -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3v18h18" />
		<!-- Bars -->
		<rect x="6" y="12" width="3" height="8" rx="0.5" stroke-width="1.5" />
		<rect x="11" y="7" width="3" height="13" rx="0.5" stroke-width="1.5" />
		<rect x="16" y="10" width="3" height="10" rx="0.5" stroke-width="1.5" />
	</svg>
{:else if name === 'invoices'}
	<!-- Dollar sign -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Vertical line through -->
		<path stroke-linecap="round" stroke-width="1.5" d="M12 2v20" />
		<!-- S curve of dollar sign -->
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M17 6.5c0-1.93-2.24-3.5-5-3.5s-5 1.57-5 3.5c0 3.5 10 1.75 10 7 0 1.93-2.24 3.5-5 3.5s-5-1.57-5-3.5"
		/>
	</svg>
{:else if name === 'calendar'}
	<!-- Calendar -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Calendar body -->
		<rect x="3" y="4" width="18" height="18" rx="2" stroke-width="1.5" />
		<!-- Top binding tabs -->
		<path stroke-linecap="round" stroke-width="1.5" d="M8 2v4M16 2v4" />
		<!-- Header line -->
		<path stroke-linecap="round" stroke-width="1.5" d="M3 9h18" />
		<!-- Date dots -->
		<circle cx="7" cy="13" r="1" fill="currentColor" />
		<circle cx="12" cy="13" r="1" fill="currentColor" />
		<circle cx="17" cy="13" r="1" fill="currentColor" />
		<circle cx="7" cy="17" r="1" fill="currentColor" />
		<circle cx="12" cy="17" r="1" fill="currentColor" />
		<circle cx="17" cy="17" r="1" fill="currentColor" />
	</svg>
{:else if name === 'history'}
	<!-- Clock with history arrow -->
	<svg class={className} style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
		<!-- Clock face -->
		<circle cx="12" cy="13" r="8" stroke-width="1.5" />
		<!-- Clock hands -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v4l2.5 2.5" />
		<!-- History arrow curving back -->
		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 5.5v4h4" />
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			stroke-width="1.5"
			d="M4.5 9.5A8.5 8.5 0 0112 4.5"
		/>
	</svg>
{/if}
