package partials

import "fmt"

templ PieChart(params PieChartProps) {
	<div class="card">
		<h3 class="font-semibold mb-4 text-text">{ params.LabelA } vs { params.LabelB }</h3>
		<div class="relative w-48 h-48 mx-auto">
			<svg class="w-full h-full" viewBox="0 0 36 36">
				<path
					class="stroke-current text-gray-light"
					d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
					fill="none"
					stroke-width="3"
				></path>
				<path
					class="stroke-current text-primary"
					stroke-dasharray={ fmt.Sprintf("%d, 100", params.Percentage) }
					d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
					fill="none"
					stroke-width="3"
					stroke-linecap="round"
				></path>
			</svg>
			<div class="absolute inset-0 flex flex-col items-center justify-center">
				<span class="text-3xl font-bold text-gray-900">{ params.Percentage }%</span>
				<span class="text-sm text-gray-500">{ params.LabelA }</span>
			</div>
		</div>
		<div class="mt-6 flex justify-center gap-4 text-sm">
			<div class="flex items-center gap-2">
				<div class="w-3 h-3 rounded-full bg-primary"></div><span>{ params.LabelA }</span>
			</div>
			<div class="flex items-center gap-2">
				<div class="w-3 h-3 rounded-full bg-gray-light"></div><span>{ params.LabelB }</span>
			</div>
		</div>
	</div>
}