<script lang="ts">
	import { Label } from '$lib/ui/core/label/index.js';
	import { Switch } from '$lib/ui/core/switch/index.js';
	import { readNetworkAutoRefresh, writeNetworkAutoRefresh } from '$lib/network/network-metrics.js';

	type Props = {
		enabled?: boolean;
		onchange?: (enabled: boolean) => void;
		disabled?: boolean;
	};

	let {
		enabled = $bindable(readNetworkAutoRefresh()),
		onchange,
		disabled = false
	}: Props = $props();

	function onToggle(checked: boolean) {
		enabled = checked;
		writeNetworkAutoRefresh(checked);
		onchange?.(checked);
	}
</script>

<div class="flex items-center gap-2">
	<Switch id="network-auto-refresh" bind:checked={enabled} onCheckedChange={onToggle} {disabled} />
	<Label for="network-auto-refresh" class="cursor-pointer text-sm text-muted-foreground">
		Авто (~15 с)
	</Label>
</div>
