<script lang="ts">
	import Button from "$lib/components/ui/Button.svelte";
	import Save from "$icon/save";
	import RotateCcw from "$icon/rotate-ccw";

	interface Props {
		dirty: boolean;
		onreset?: () => void;
		onsave?: () => void;
	}

	let { dirty, onreset, onsave }: Props = $props();
</script>

<!-- Figma keeps Save disabled until something changed, and only then reveals Reset
     and the "Unsaved changes" note beside it -->
<div class="flex shrink-0 items-center gap-4">
	{#if dirty}
		<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
		<span class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span>
	{/if}
	<Button variant="primary" icon={Save} disabled={!dirty} onclick={onsave}>Save</Button>
</div>
