/**
 * @param {{
 *   title: string,
 *   children?: React.ReactNode,
 *   variant?: "info" | "success" | "warning" | "danger",
 *   onDismiss?: () => void
 * }} props
 */
export function Alert({
  title,
  children,
  variant = "info",
  onDismiss,
}) {
  return (
    <section
      className={`ui-alert ui-alert--${variant}`}
      role={variant === "danger" ? "alert" : "status"}
    >
      <div>
        <strong>{title}</strong>
        {children ? <div className="ui-alert__content">{children}</div> : null}
      </div>
      {onDismiss ? (
        <button
          className="ui-alert__dismiss"
          type="button"
          aria-label={`${title} 알림 닫기`}
          onClick={onDismiss}
        >
          ×
        </button>
      ) : null}
    </section>
  );
}