import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export type AlertAction = {
  label: string;
  onClick: () => void;
};

export type AlertProps = {
  action?: AlertAction;
  children?: ReactNode;
  className?: string;
  description?: ReactNode;
  dismissible?: boolean;
  onDismiss?: () => void;
  tone?: "info" | "success" | "warning" | "error" | "destructive";
  title?: string;
};

export function Alert({
  action,
  children,
  className,
  description,
  dismissible = false,
  onDismiss,
  tone = "info",
  title,
}: AlertProps) {
  const toneClasses =
    tone === "success"
      ? "border-[var(--uhuru-success-border)] bg-[var(--uhuru-success-bg)] text-[var(--uhuru-success-text)]"
      : tone === "warning"
        ? "border-[var(--uhuru-warning-border)] bg-[var(--uhuru-warning-bg)] text-[var(--uhuru-warning-text)]"
        : tone === "error" || tone === "destructive"
          ? "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] text-[var(--uhuru-error-text)]"
          : "border-[var(--uhuru-info-border)] bg-[var(--uhuru-info-bg)] text-[var(--uhuru-info-text)]";

  const body = description ?? children;

  return (
    <div
      className={cn(
        "rounded-[var(--uhuru-radius-md)] border px-4 py-3",
        toneClasses,
        className,
      )}
    >
      <div className="flex items-start gap-3">
        <div className="min-w-0 flex-1">
          {title ? <p className="m-0 text-sm font-medium">{title}</p> : null}
          {body ? (
            <div className={cn("text-sm leading-6", title ? "mt-1" : "")}>
              {body}
            </div>
          ) : null}
          {action ? (
            <button
              className="mt-3 inline-flex items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[currentColor] px-3 py-2 text-xs font-medium transition hover:bg-[var(--uhuru-surface-muted)]"
              onClick={action.onClick}
              type="button"
            >
              {action.label}
            </button>
          ) : null}
        </div>
        {dismissible ? (
          <button
            aria-label="Dismiss alert"
            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-current opacity-70 transition hover:bg-[var(--uhuru-surface-muted)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--uhuru-border-accent)]"
            onClick={onDismiss}
            type="button"
          >
            <span aria-hidden="true">×</span>
          </button>
        ) : null}
      </div>
    </div>
  );
}