<script lang="ts">
	import { currentFontScale } from '$lib/stores/settings';
	import Icon from '@iconify/svelte';
</script>

<section class="bg-base-200 rounded-xl p-6">
	<div class="flex items-center gap-3 mb-6">
		<Icon icon="mdi:format-size" class="w-6 h-6 text-primary" />
		<div>
			<h2 class="text-xl font-semibold text-base-content">Font Scale</h2>
			<p class="text-base-content/70 text-sm">Adjust the text size throughout the application</p>
		</div>
	</div>

	<div class="space-y-4">
		<div class="flex items-center justify-between">
			<span class="text-sm font-medium text-base-content">
				Scale: {$currentFontScale}%
			</span>
			<div class="flex gap-2">
				<button
					onclick={() => ($currentFontScale = Math.max(50, $currentFontScale - 10))}
					class="btn btn-sm btn-outline"
				>
					<Icon icon="mdi:minus" class="w-4 h-4" />
				</button>
				<button onclick={() => ($currentFontScale = 100)} class="btn btn-sm btn-primary"
					>Reset</button
				>
				<button
					onclick={() => ($currentFontScale = Math.min(200, $currentFontScale + 10))}
					class="btn btn-sm btn-outline"
				>
					<Icon icon="mdi:plus" class="w-4 h-4" />
				</button>
			</div>
		</div>

		<input
			type="range"
			min="50"
			max="200"
			step="10"
			bind:value={$currentFontScale}
			class="range range-primary w-full"
		/>

		<div class="flex justify-between text-xs text-base-content/60">
			<span>50%</span>
			<span>100%</span>
			<span>200%</span>
		</div>

		<div class="bg-base-100 p-4 rounded-lg border border-base-300">
			<p class="font-semibold mb-2">Preview Text</p>
			<p class="text-sm">
				This is how your text will appear with the current font scale setting. Lorem ipsum dolor sit
				amet, consectetur adipiscing elit.
			</p>
		</div>
	</div>
</section>
