<script lang="ts">
	import type { Snippet } from 'svelte';

	export type IconRingTone = 'emerald' | 'sky' | 'rose' | 'amber' | 'violet' | 'indigo' | 'base';
	export type IconRingSize = 'xs' | 'sm' | 'md' | 'lg';
	export type IconRingShape = 'rounded' | 'circle';

	interface Props {
		tone?: IconRingTone;
		size?: IconRingSize;
		shape?: IconRingShape;
		onDark?: boolean;
		class?: string;
		children: Snippet;
	}

	let {
		tone = 'base',
		size = 'md',
		shape = 'rounded',
		onDark = false,
		class: className = '',
		children
	}: Props = $props();

	const sizeClass: Record<IconRingSize, string> = {
		xs: 'icon-ring-xs',
		sm: 'icon-ring-sm',
		md: 'icon-ring-md',
		lg: 'icon-ring-lg'
	};
</script>

<div
	class="icon-ring {shape === 'circle' ? 'icon-ring-circle' : 'icon-ring-rounded'} {sizeClass[size]} {onDark
		? 'icon-ring-on-dark'
		: `icon-ring-${tone}`} {className}"
>
	{@render children()}
</div>
