<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const error = tv({
		slots: {
			root: "overflow-hidden rounded-sm border border-border-danger bg-background-danger-subtle text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20",
			header: "flex items-center gap-2",
			icon: "shrink-0",
			label: "min-w-0",
			toggle:
				"flex w-full items-center gap-2 border-t border-border-danger text-foreground-danger transition-colors hover:text-foreground-danger-strong dark:border-border-danger/60",
			chevron: "shrink-0 transition-transform",
			body: "border-t border-border-danger font-mono text-foreground-danger-strong dark:border-border-danger/60"
		},
		variants: {
			size: {
				small: {
					header: "px-3 py-2 typography-paragraph-small",
					icon: "size-4",
					toggle: "px-3 py-2 typography-paragraph-small",
					chevron: "size-4",
					body: "px-3 py-2 typography-paragraph-small"
				},
				large: {
					header: "px-4 py-3 typography-paragraph-large",
					icon: "size-5",
					toggle: "px-4 py-3 typography-paragraph-small",
					chevron: "size-4",
					body: "px-4 py-3 typography-paragraph-small"
				}
			}
		},
		defaultVariants: {
			size: "small"
		}
	});

	export type ErrorVariants = VariantProps<typeof error>;
</script>

<script lang="ts">
	import type { Snippet } from "svelte";
	import type { HTMLAttributes } from "svelte/elements";
	import OctagonAlert from "$icon/octagon-alert";
	import ChevronRight from "$icon/chevron-right";

	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
		/** The error message shown next to the icon; renders nothing when absent. */
		label?: string;
		size?: ErrorVariants["size"];
		class?: string;
		/** Optional collapsible content revealed by a "Show code" toggle. */
		children?: Snippet;
	}

	let { label, size = "small", class: className, children, ...rest }: Props = $props();

	let open = $state(false);
	$effect(() => {
		if (!label) open = false;
	});

	const classes = $derived(error({ size }));
</script>

{#if label}
	<div class={classes.root({ class: className })} role="alert" {...rest}>
		<div class={classes.header()}>
			<OctagonAlert class={classes.icon()} aria-hidden="true" />
			<span class={classes.label()}>{label}</span>
		</div>

		{#if children}
			<button type="button" class={classes.toggle()} onclick={() => (open = !open)}>
				<ChevronRight class="{classes.chevron()} {open ? 'rotate-90' : ''}" aria-hidden="true" />
				<span>Show code</span>
			</button>
			{#if open}
				<div class={classes.body()}>
					{@render children()}
				</div>
			{/if}
		{/if}
	</div>
{/if}
