<script module lang="ts">
	/**
	 * The Light and Dark thumbnails in Figma are a little mock of the UI built from
	 * plain rectangles. Both share one geometry and differ only in palette, so the
	 * shapes live here once and the colours come in as a literal map.
	 *
	 * Those literals are deliberate: a Light thumbnail has to keep looking light
	 * while the app itself is in dark mode, so it cannot use semantic tokens. The
	 * Auto thumbnail is the exception and does use them — following the system is
	 * the whole point of that option.
	 */
	type Role = "surface" | "strong" | "placeholder" | "muted" | "subtle" | "success" | "faint";

	interface Rect {
		x: number;
		y: number;
		w: number;
		h: number;
		role: Role;
	}

	// coordinates are Figma's, in a 135 × 84 box
	const RECTS: Rect[] = [
		{ x: 0, y: 0, w: 135, h: 6, role: "surface" },
		{ x: 11.3, y: 1.5, w: 9, h: 3, role: "strong" },
		{ x: 117.8, y: 1.5, w: 5.3, h: 3, role: "placeholder" },
		{ x: 124.5, y: 1.5, w: 9, h: 3, role: "placeholder" },
		{ x: 11.3, y: 12, w: 38.6, h: 6, role: "muted" },
		{ x: 80.3, y: 12, w: 13.5, h: 6, role: "surface" },
		{ x: 95.3, y: 12, w: 13.5, h: 6, role: "surface" },
		{ x: 110.3, y: 12, w: 13.5, h: 6, role: "surface" },
		{ x: 11.3, y: 20.3, w: 112.5, h: 55.5, role: "surface" },
		{ x: 14.3, y: 23.3, w: 48, h: 4.5, role: "subtle" },
		{ x: 102.8, y: 23.3, w: 18, h: 4.5, role: "success" },
		{ x: 14.3, y: 30, w: 40.5, h: 4.5, role: "faint" },
		{ x: 78.8, y: 30, w: 42, h: 4.5, role: "subtle" },
		{ x: 14.3, y: 36.8, w: 43.5, h: 4.5, role: "faint" },
		{ x: 78.8, y: 36.8, w: 24, h: 4.5, role: "faint" },
		{ x: 14.3, y: 43.5, w: 31.5, h: 4.5, role: "faint" },
		{ x: 14.3, y: 50.3, w: 37.5, h: 4.5, role: "faint" },
		{ x: 78.8, y: 50.3, w: 36.8, h: 4.5, role: "subtle" },
		{ x: 14.3, y: 57, w: 45.8, h: 4.5, role: "faint" },
		{ x: 78.8, y: 57, w: 21, h: 4.5, role: "faint" },
		{ x: 14.3, y: 63.8, w: 23.3, h: 4.5, role: "faint" },
		{ x: 78.8, y: 63.8, w: 24, h: 4.5, role: "faint" }
	];

	export const PALETTES = {
		light: {
			canvas: "#f3f4f6",
			border: "#e5e7eb",
			surface: "#ffffff",
			strong: "#111827",
			placeholder: "#9ca3af",
			muted: "#4b5563",
			subtle: "#6b7280",
			success: "#16a34a",
			faint: "#d1d5db"
		},
		dark: {
			canvas: "#111827",
			border: "#374151",
			surface: "#1f2937",
			strong: "#f3f4f6",
			placeholder: "#9ca3af",
			// dark drops the muted/subtle distinction — both resolve to gray-400
			muted: "#9ca3af",
			subtle: "#9ca3af",
			success: "#4ade80",
			faint: "#6b7280"
		}
	} as const;

	export type PaletteName = keyof typeof PALETTES;
</script>

<script lang="ts">
	interface Props {
		palette: PaletteName;
	}

	let { palette }: Props = $props();

	const colors = $derived(PALETTES[palette]);
	const pct = (n: number, total: number) => `${(n / total) * 100}%`;
</script>

<div
	class="relative aspect-135/84 w-full overflow-hidden rounded-sm border"
	style="background-color: {colors.canvas}; border-color: {colors.border}"
	aria-hidden="true"
>
	{#each RECTS as rect, i (i)}
		<span
			class="absolute"
			style="left: {pct(rect.x, 135)}; top: {pct(rect.y, 84)}; width: {pct(
				rect.w,
				135
			)}; height: {pct(rect.h, 84)}; background-color: {colors[rect.role]}"
		></span>
	{/each}
</div>
