<script>"use strict";
import { twMerge } from "tailwind-merge";
import Badge from "./Badge.svelte";
import Button from "./Button.svelte";
import Icon from "./Icon.svelte";
export let variant = "success";
export let leadingIcon = false;
export let dismissible = false;
export let title = "";
export let action = null;
export let content;
export let actionText = "";
export let className = "";
let nodeRef;
const alertIcons = {
  success: "check",
  danger: "close",
  info: "alert-outline",
  action: "alert-outline",
  warning: "alert-outline",
  base: "dot"
};
const buttonColors = {
  success: "emerald",
  danger: "rose",
  info: "blue",
  action: "sky",
  warning: "amber",
  base: "stone"
};
</script>

<div
	class={twMerge('p-4', 'rounded-md', 'border', className)}
	bind:this={nodeRef}
	class:bg-emerald-50={variant === 'success'}
	class:bg-rose-50={variant === 'danger'}
	class:bg-blue-50={variant === 'info'}
	class:bg-sky-50={variant === 'action'}
	class:bg-amber-50={variant === 'warning'}
	class:bg-base-100={variant === 'base'}
	class:border-emerald-200={variant === 'success'}
	class:border-rose-200={variant === 'danger'}
	class:border-blue-200={variant === 'info'}
	class:border-sky-200={variant === 'action'}
	class:border-yellow-200={variant === 'warning'}
	class:border-stone-200={variant === 'base'}
>
	<div class="flex items-center w-full gap-2">
		{#if leadingIcon}
			<Badge
				type="circle"
				size="sm"
				color={buttonColors[variant]}
				leadingIcon={alertIcons[variant]}
				contrast
			/>
		{/if}
		<p
			class="w-full text-4xl font-bold"
			class:text-emerald-900={variant === 'success'}
			class:text-rose-900={variant === 'danger'}
			class:text-blue-900={variant === 'info'}
			class:text-sky-900={variant === 'action'}
			class:text-amber-900={variant === 'warning'}
			class:text-stone-950={variant === 'base'}
		>
			{#if title}
				{title}
			{:else}
				{content}
			{/if}
		</p>

		{#if dismissible}
			<button
				class="flex items-center justify-center rounded-full"
				on:click={() => nodeRef?.parentNode?.removeChild(nodeRef)}
			>
				<Icon iconName="close" size="sm" />
			</button>
		{/if}
	</div>

	{#if title && content}
		<p
			class="mt-1.5 text-3xl"
			class:text-emerald-900={variant === 'success'}
			class:text-rose-900={variant === 'danger'}
			class:text-blue-900={variant === 'info'}
			class:text-sky-900={variant === 'action'}
			class:text-amber-900={variant === 'warning'}
			class:text-stone-950={variant === 'base'}
		>
			{content}
		</p>
	{/if}

	{#if action}
		<Button
			on:click={action}
			styleClass="mt-4"
			size="sm"
			appearance="flat"
			color={buttonColors[variant]}
		>
			{actionText || 'Action'}
		</Button>
	{/if}
</div>
