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

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

interface AlertMessageProps {
  type: "error" | "success" | "warning" | "info";
  message: string;
  onDismiss?: () => void;
  className?: string;
}

const alertStyles = {
  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 alertTitleStyles = {
  error: "text-red-800",
  success: "text-green-800",
  warning: "text-yellow-800",
  info: "text-blue-800",
};

export function AlertMessage({
  type,
  message,
  onDismiss,
  className,
}: AlertMessageProps) {
  const titles = {
    error: "Error",
    success: "Success",
    warning: "Warning",
    info: "Info",
  };

  return (
    <div
      role="alert"
      className={cn(
        "rounded-lg border p-4",
        alertStyles[type],
        className
      )}
    >
      <div className="flex items-start justify-between gap-2">
        <div className="flex-1">
          <p className={cn("text-sm font-medium", alertTitleStyles[type])}>
            {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",
              type === "error" && "text-red-600 hover:bg-red-100",
              type === "success" && "text-green-600 hover:bg-green-100",
              type === "warning" && "text-yellow-600 hover:bg-yellow-100",
              type === "info" && "text-blue-600 hover:bg-blue-100"
            )}
            aria-label="Dismiss"
          >
            <X className="h-4 w-4" />
          </button>
        )}
      </div>
    </div>
  );
}