import React from "react";
import clsx from "clsx";

export const Alert = ({
  variant = "default",
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & {
  variant?: "default" | "success" | "warn" | "error";
}) => {
  const variants: Record<string, string> = {
    default: "border-slate-200 bg-white text-slate-700",
    success: "border-emerald-200 bg-emerald-50 text-emerald-800",
    warn: "border-amber-200 bg-amber-50 text-amber-800",
    error: "border-rose-200 bg-rose-50 text-rose-800",
  };
  return (
    <div
      role="alert"
      className={clsx(
        "w-full rounded-xl border px-4 py-3 shadow-lg backdrop-blur",
        variants[variant],
        className
      )}
      {...props}
    />
  );
};

export const AlertTitle = ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
  <h5 className={clsx("text-sm font-semibold", className)} {...props} />
);

export const AlertDescription = ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
  <p className={clsx("mt-1 text-xs", className)} {...props} />
);
