<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const colorBall = tv({
		base: "shrink-0 rounded-full",
		variants: {
			size: {
				sm: "size-2",
				md: "size-4",
				lg: "size-8"
			}
		},
		defaultVariants: {
			size: "sm"
		}
	});

	export type ColorBallVariants = VariantProps<typeof colorBall>;
</script>

<script lang="ts">
	interface Props {
		/** any CSS colour, e.g. a language colour or a label's hex */
		color: string;
		size?: ColorBallVariants["size"];
		class?: string;
	}

	let { color, size = "sm", class: className }: Props = $props();

	const classes = $derived(colorBall({ size, class: className }));
	const sphere = $derived(
		`radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 70%, white), ${color} 30%, color-mix(in srgb, ${color} 85%, black))`
	);
</script>

<div class={classes} style:background={sphere}></div>
