<script>
	export let artist = 'Metallica';
	export let songName = 'The Unforgiven';
	export let lyrics = `New blood joins this earth
And quickly he's subdued
Through constant pained disgrace
The young boy learns their rules
With time, the child draws in
This whipping boy done wrong
Deprived of all his thoughts
The young man struggles on and on, he's known
A vow unto his own
That never from this day
His will they'll take away

What I've felt
What I've known
Never shined through in what I've shown
Never be
Never see
Won't see what might have been
`;
	let score = 1;
</script>

<div class="flex flex-col gap-20 my-20 text-center">
	<div class="flex flex-col gap-4">
		<h2 class="text-2xl font-semibold">Nyt soi:</h2>
		<h3 class="text-xl">{artist} - {songName}</h3>
	</div>
	<div class="flex flex-col my-2 gap-4">
		<label for="score">Pisteet</label>
		<input
			class="w-full"
			type="range"
			value={score}
			min="1"
			max="100"
			name="score"
			on:change={(e) => (score = e.target.value)}
		/>

		<div class="flex justify-between text-center">
			<span>1</span><span>25</span><span>50</span><span>75</span><span>100</span>
		</div>
	</div>
	<div class="flex flex-col gap-4">
		<label for="comment">Kommentti</label>
		<textarea
			name="comment"
			id="comment"
			rows="10"
			placeholder="Sanallinen arvostelu"
			class="input-text-field"
			style="resize: none;"
		></textarea>
	</div>

	<button class="button-primary">Lähetä</button>
	<div class="flex justify-center border-2 max-w-sm mx-auto p-4 rounded-md h-80 overflow-auto">
		<pre class="font-serif text-md">{lyrics}</pre>
	</div>
</div>
