<script lang="ts">
	import { cn } from '@foxui/core';

	let { rating, class: className }: { rating: number; class?: string } = $props();

	// Convert 0-10 rating to 0-5 stars
	const starRating = $derived(Math.max(0, Math.min(10, rating ?? 0)) / 2);
	const fullStars = $derived(Math.floor(starRating));
	const hasHalfStar = $derived(rating % 2 === 1);
	const emptyStars = $derived(Math.max(0, 5 - fullStars - (hasHalfStar ? 1 : 0)));
</script>

{#snippet star(className: string)}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 {className}">
		<path
			fill="currentColor"
			fill-rule="evenodd"
			d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
			clip-rule="evenodd"
		/>
	</svg>
{/snippet}

{#snippet halfStar()}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-accent-500 size-5">
		<defs>
			<linearGradient id="half-filled" x1="0%" y1="0%" x2="100%" y2="0%">
				<stop offset="50%" stop-color="currentColor" />
				<stop offset="50%" stop-color="var(--color-base-400)" />
			</linearGradient>
		</defs>
		<path
			fill="url(#half-filled)"
			fill-rule="evenodd"
			d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
			clip-rule="evenodd"
		/>
	</svg>
{/snippet}

<div class={cn('text-accent-500 flex', className)}>
	{#each Array(fullStars)}
		{@render star('text-accent-500')}
	{/each}
	{#if hasHalfStar}
		{@render halfStar()}
	{/if}
	{#each Array(emptyStars)}
		{@render star('text-base-400')}
	{/each}
</div>
