/**
 * Reusable alert message component for error and success messages.
 */

import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export type AlertMessageType = "error" | "success" | "warning" | "info";

export interface AlertMessageProps {
  type: AlertMessageType;
  message: string;
  onDismiss?: () => void;
  className?: string;
}

const ALERT_STYLES: Record<AlertMessageType, string> = {
  error: "border-red-200 bg-red-50 text-red-600",
  success: "border-green-200 bg-green-50 text-green-600",
  warning: "border-yellow-200 bg-yellow-50 text-yellow-600",
  info: "border-blue-200 bg-blue-50 text-blue-600",
};

const ALERT_TITLE_STYLES: Record<AlertMessageType, string> = {
  error: "text-red-800",
  success: "text-green-800",
  warning: "text-yellow-800",
  info: "text-blue-800",
};

const ALERT_TITLES: Record<AlertMessageType, string> = {
  error: "Error",
  success: "Success",
  warning: "Warning",
  info: "Info",
};

const DISMISS_BUTTON_STYLES: Record<AlertMessageType, string> = {
  error: "text-red-600 hover:bg-red-100",
  success: "text-green-600 hover:bg-green-100",
  warning: "text-yellow-600 hover:bg-yellow-100",
  info: "text-blue-600 hover:bg-blue-100",
};

export function AlertMessage({ type, message, onDismiss, className }: AlertMessageProps) {
  return (
    <div
      role="alert"
      className={cn("rounded-lg border p-4", ALERT_STYLES[type], className)}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex-1">
          <p className={cn("text-sm font-medium", ALERT_TITLE_STYLES[type])}>
            {ALERT_TITLES[type]}
          </p>
          <p className="mt-1 text-sm">{message}</p>
        </div>
        {onDismiss && (
          <button
            type="button"
            onClick={onDismiss}
            className={cn(
              "flex-shrink-0 rounded p-1 transition hover:opacity-70",
              DISMISS_BUTTON_STYLES[type]
            )}
            aria-label="Dismiss"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    </div>
  );
}