<script lang="ts">
	import ColorBall from "$lib/components/ui/ColorBall.svelte";
	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
	import type { LanguageSlice } from "./types";

	interface Props {
		languages: LanguageSlice[];
	}

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

	const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK;
	const percent = (language: LanguageSlice) =>
		language.share < 1 ? "<1" : String(language.percentage);
	const label = (language: LanguageSlice) => `${language.name} ${percent(language)}%`;
</script>

<details class="group -mx-6 -mt-4 mb-4">
	<summary
		class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px overflow-hidden rounded-t transition-transform group-open:scale-y-100 hover:scale-y-100"
	>
		{#each languages as language (language.name)}
			<div
				title={label(language)}
				style={`background-color: ${colorFor(language.name)}; flex: ${language.share} 0 0px`}
			></div>
		{/each}
	</summary>
	<div
		class="flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2"
	>
		{#each languages as language (language.name)}
			<div class="flex items-center gap-2 typography-paragraph-small">
				<ColorBall color={colorFor(language.name)} class="size-2.5" />
				<span>
					{language.name}
					<span class="text-foreground-subtle">{percent(language)}%</span>
				</span>
			</div>
		{/each}
	</div>
</details>
