import type { ReactNode } from "react";

type AlertVariant = "info" | "danger";

const TITLE_TONE_CLASSES: Record<AlertVariant, string> = {
  info: "text-foreground",
  danger: "text-danger",
};

interface AlertProps {
  variant?: AlertVariant;
  title: string;
  children?: ReactNode;
  actions?: ReactNode;
}

/**
 * 확인/경고 다이얼로그 비주얼(scrim 오버레이 + 패널).
 * 열림/닫힘 여부는 호출부(feature)가 마운트/언마운트로 제어하고, 포커스 트랩도
 * 호출부 책임이다. 이 컴포넌트는 상태를 가지지 않는다.
 */
export function Alert({ variant = "info", title, children, actions }: AlertProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-scrim p-4">
      <div
        role="alertdialog"
        aria-modal="true"
        aria-label={title}
        className="w-full max-w-sm animate-dialog-in rounded-xl bg-surface p-6 shadow-dialog"
      >
        <h2 className={`text-title-lg ${TITLE_TONE_CLASSES[variant]}`}>{title}</h2>
        {children && (
          <div className="mt-2 text-body-md text-foreground-muted">{children}</div>
        )}
        {actions && <div className="mt-6 flex justify-end gap-2">{actions}</div>}
      </div>
    </div>
  );
}