---
export interface Props {
	variant?: "info" | "success" | "warning" | "error";
	title?: string;
	dismissible?: boolean;
	class?: string;
	id?: string;
}

const {
	variant = "info",
	title,
	dismissible = false,
	class: className = "",
	id,
	...attrs
} = Astro.props;

const variants: Record<
	string,
	{ bg: string; border: string; text: string; icon: string }
> = {
	info: {
		bg: "bg-blue-50",
		border: "border-blue-200",
		text: "text-blue-800",
		icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
	},
	success: {
		bg: "bg-green-50",
		border: "border-green-200",
		text: "text-green-800",
		icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
	},
	warning: {
		bg: "bg-yellow-50",
		border: "border-yellow-200",
		text: "text-yellow-800",
		icon: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
	},
	error: {
		bg: "bg-red-50",
		border: "border-red-200",
		text: "text-red-800",
		icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
	},
};

const v = variants[variant];

const classes = ["rounded-lg border p-4", v.bg, v.border, v.text, className]
	.filter(Boolean)
	.join(" ");

const alertId = id || `alert-${Math.random().toString(36).substring(2, 8)}`;
---

<div 
  id={alertId}
  class={classes} 
  role="alert"
  x-data={dismissible ? '{ show: true }' : undefined}
  x-show={dismissible ? 'show' : undefined}
  x-transition={dismissible ? '' : undefined}
  {...attrs}
>
  <div class="flex items-start gap-3">
    <svg class="h-5 w-5 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={v.icon} />
    </svg>
    
    <div class="flex-1">
      {title && (
        <h3 class="font-medium mb-1">{title}</h3>
      )}
      <div class={title ? 'text-sm opacity-90' : ''}>
        <slot />
      </div>
    </div>
    
    {dismissible && (
      <button 
        type="button"
        class="flex-shrink-0 -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors"
        aria-label="Schliessen"
        x-on:click="show = false"
      >
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    )}
  </div>
</div>