<script lang="ts">
	import Icon from "@iconify/svelte"
	import { Action as ActionSchema } from "@kksh/api/models"
	import { Avatar, Button } from "@kksh/svelte5"
	import { cn } from "@kksh/ui/utils"
	import Kbd from "../common/Kbd.svelte"
	import ActionPanel from "./ActionPanel.svelte"

	let {
		class: className,
		defaultAction,
		actionPanel,
		actionPanelOpen = $bindable(false),
		onActionPanelBlur,
		onDefaultActionSelected,
		onActionSelected
	}: {
		class?: string
		defaultAction?: string | null
		actionPanelOpen?: boolean
		onActionPanelBlur?: () => void
		actionPanel?: ActionSchema.ActionPanel
		onDefaultActionSelected?: () => void
		onActionSelected?: (value: string) => void
	} = $props()
</script>

<div
	data-tauri-drag-region
	class={cn("flex select-none items-center justify-between gap-4 border-t px-2", className)}
>
	<Avatar.Root class="pointer-events-none p-1.5">
		<Avatar.Image
			src="/favicon.png"
			alt="Kunkun Logo"
			class="h-full select-none invert dark:invert-0"
		/>
	</Avatar.Root>
	<div class="flex items-center gap-1">
		{#if defaultAction}
			<Button size="default" class="h-full" variant="ghost" onclick={onDefaultActionSelected}>
				{defaultAction}
				<Kbd><Icon icon="uil:enter" /></Kbd>
			</Button>
		{/if}
		{#if actionPanel}
			<ActionPanel
				{actionPanel}
				{onActionSelected}
				bind:open={actionPanelOpen}
				onBlur={onActionPanelBlur}
			/>
		{/if}
	</div>
</div>
