import { JSX } from "preact";

type AlertType = "error" | "warning" | "info";

interface AlertMessageProps {
  type: AlertType;
  title?: string;
  message?: string;
  children?: JSX.Element | string;
}

const alertStyles = {
  error: "bg-red-50 border border-red-200 text-red-700",
  warning: "bg-yellow-50 border border-yellow-200 text-yellow-700",
  info: "bg-blue-50 border border-blue-200 text-blue-700",
};

export function AlertMessage(
  { type, title, message, children }: AlertMessageProps,
) {
  const content = message ?? children;
  return (
    <div class={`mb-6 px-4 py-3 rounded ${alertStyles[type]}`}>
      {title && <h3 class="font-medium mb-2">{title}</h3>}
      <div class="text-sm">{content}</div>
    </div>
  );
}