"use client";

import React from "react";
import {
  CheckCircleIcon,
  InformationCircleIcon,
  ExclamationTriangleIcon,
  XCircleIcon,
} from "@heroicons/react/24/outline";

type Variant = "success" | "info" | "warning" | "error";
type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;

const variantClasses: Record<
  Variant,
  { bg: string; border: string; text: string; Icon: IconType }
> = {
  success: {
    bg: "bg-green-50",
    border: "border-green-200",
    text: "text-green-800",
    Icon: CheckCircleIcon,
  },
  info: {
    bg: "bg-blue-50",
    border: "border-blue-200",
    text: "text-blue-800",
    Icon: InformationCircleIcon,
  },
  warning: {
    bg: "bg-amber-50",
    border: "border-amber-200",
    text: "text-amber-800",
    Icon: ExclamationTriangleIcon,
  },
  error: {
    bg: "bg-red-50",
    border: "border-red-200",
    text: "text-red-800",
    Icon: XCircleIcon,
  },
};

interface AlertBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: Variant;
  title?: string;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  size?: "sm" | "md";
  elevated?: boolean;
  onClose?: () => void;
}

export function AlertBanner({
  variant = "info",
  title,
  children,
  icon,
  size = "md",
  elevated = false,
  onClose,
  className,
  ...rest
}: AlertBannerProps) {
  const styles = variantClasses[variant];
  const Icon = styles.Icon;
  const padding = size === "sm" ? "p-3" : "p-4";
  const radius = "rounded-xl";
  const shadow = elevated ? "shadow-sm" : "";
  const role = variant === "error" || variant === "warning" ? "alert" : "status";

  return (
    <div
      className={[radius, padding, "border", shadow, styles.bg, styles.border, className]
        .filter(Boolean)
        .join(" ")}
      role={role}
      {...rest}
    >
      <div className="flex items-start gap-3">
        <div className="mt-0.5 flex-shrink-0">
          {icon ? icon : <Icon className={["h-5 w-5", styles.text].join(" ")} />}
        </div>
        <div className="flex-1">
          {title && <p className={["font-medium", styles.text].join(" ")}>{title}</p>}
          {children && <div className={["text-sm mt-1", styles.text].join(" ")}>{children}</div>}
        </div>
        {onClose && (
          <button
            onClick={onClose}
            aria-label="Close alert"
            className="text-gray-400 hover:text-gray-600"
          >
            ×
          </button>
        )}
      </div>
    </div>
  );
}

export type { AlertBannerProps };
