<script lang="ts">
	import RatingInput from "@ui/components/RatingInput.svelte";
	import { Flame } from "lucide-svelte";

	interface Props {
		spiceConfigured?: boolean;
		onSubmit: (rating: number, spice: number) => void;
	}
	let { spiceConfigured = false, onSubmit }: Props = $props();

	let rating = $state(0);
	let spice = $state(0);

	function onsubmit(ev: SubmitEvent) {
		ev.preventDefault();

		onSubmit(rating, spice);
	}
</script>

<div class="obt-rating">
	<h2>Rating</h2>
	<form {onsubmit}>
		<div class="field">
			<label for="rating">Rating</label>
			<RatingInput name="rating" half bind:value={rating} />
		</div>
		{#if spiceConfigured}
			<div class="field">
				<label for="spice">Spice</label>
				<RatingInput name="spice" bind:value={spice}>
					{#snippet inactive()}
						<Flame color="var(--background-modifier-border)" />
					{/snippet}
					{#snippet active()}
						<Flame
							color="var(--color-red)"
							fill="rgba(var(--color-red-rgb), 0.2)"
						/>
					{/snippet}
				</RatingInput>
			</div>
		{/if}
		<button type="submit">Submit</button>
	</form>
</div>

<!-- svelte-ignore css_unused_selector -->
<style lang="scss">
	@use "../styles/utils";

	.obt-rating {
		padding-bottom: var(--size-4-4);

		h2 {
			text-align: center;
		}

		form {
			display: flex;
			flex-direction: column;
			gap: var(--size-4-4);

			.field {
				display: flex;
				flex-direction: column;
				align-items: center;

				label {
					@include utils.visually-hidden;
				}
			}

			button {
				align-self: stretch;
			}
		}
	}
</style>
