<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;
		saving?: boolean;
		onreset?: () => void;
		onsave?: () => void;
	}

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

<div class="contents sm:flex sm:shrink-0 sm:items-center sm:gap-md">
	{#if dirty}
		<div
			class="order-last flex w-full items-center justify-between gap-md sm:order-0 sm:w-auto"
		>
			<Button icon={RotateCcw} onclick={onreset}>Reset</Button>
			<span
				data-testid="unsavedChanges"
				class="typography-paragraph-regular text-foreground-muted">Unsaved changes</span
			>
		</div>
	{/if}
	<Button
		variant="primary"
		icon={Save}
		disabled={!dirty || saving}
		loading={saving}
		onclick={onsave}>Save</Button
	>
</div>