---
import { Icon } from "../atoms/Icon";

interface Props {
  type?: "info" | "warning" | "error" | "success" | "tip" | "note";
}

const { type = "info" } = Astro.props;

const calloutConfig = {
  info: {
    icon: "Info",
    bgColor: "bg-[var(--callout-info-bg)]",
    borderColor: "border-[var(--callout-info-border)]",
    textColor: "text-[var(--callout-info-text)]",
  },
  warning: {
    icon: "AlertTriangle",
    bgColor: "bg-[var(--callout-warning-bg)]",
    borderColor: "border-[var(--callout-warning-border)]",
    textColor: "text-[var(--callout-warning-text)]",
  },
  error: {
    icon: "AlertCircle",
    bgColor: "bg-[var(--callout-error-bg)]",
    borderColor: "border-[var(--callout-error-border)]",
    textColor: "text-[var(--callout-error-text)]",
  },
  success: {
    icon: "Check",
    bgColor: "bg-[var(--callout-success-bg)]",
    borderColor: "border-[var(--callout-success-border)]",
    textColor: "text-[var(--callout-success-text)]",
  },
  tip: {
    icon: "Lightbulb",
    bgColor: "bg-[var(--callout-tip-bg)]",
    borderColor: "border-[var(--callout-tip-border)]",
    textColor: "text-[var(--callout-tip-text)]",
  },
  note: {
    icon: "Info",
    bgColor: "bg-[var(--callout-note-bg)]",
    borderColor: "border-[var(--callout-note-border)]",
    textColor: "text-[var(--callout-note-text)]",
  },
};

const config = calloutConfig[type];
---

<div
  class={`callout my-6 relative rounded-xl border ${config.bgColor} ${config.borderColor} overflow-hidden`}
>
  <div class="flex items-center gap-2 p-4">
    <Icon name={config.icon} size={16} className={config.textColor} />
    <div class={`flex-1 ${config.textColor}`}>
      <slot />
    </div>
  </div>
</div>

