<script lang="ts" module>
	export type BadgeStyle = 'outline' | 'dash' | 'soft' | 'ghost';
</script>

<script lang="ts">
	import type { DaisyColor, DaisySize } from '$lib/types';
	import type { Snippet } from 'svelte';

	type Props = {
		children: Snippet;
		color?: DaisyColor;
		size?: DaisySize;
		style?: BadgeStyle;
	};

	let { children, color, size, style }: Props = $props();
</script>

<span
	class="badge"
	class:badge-primary={color === 'primary'}
	class:badge-secondary={color === 'secondary'}
	class:badge-accent={color === 'accent'}
	class:badge-neutral={color === 'neutral'}
	class:badge-info={color === 'info'}
	class:badge-success={color === 'success'}
	class:badge-warning={color === 'warning'}
	class:badge-error={color === 'error'}
	class:badge-xs={size === 'xs'}
	class:badge-sm={size === 'sm'}
	class:badge-md={size === 'md'}
	class:badge-lg={size === 'lg'}
	class:badge-xl={size === 'xl'}
	class:badge-outline={style === 'outline'}
	class:badge-dash={style === 'dash'}
	class:badge-soft={style === 'soft'}
	class:badge-ghost={style === 'ghost'}
>
	{@render children?.()}
</span>