Danger zone

/* The fill stays `surface`: a red card reads as "something has gone wrong", and nothing has — yet. */
.zone { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; border: 1px solid var(--danger); border-radius: var(--radius-panel); padding: var(--space-5) var(--space-6); background: var(--surface); }
.title { margin: 0; color: var(--danger); font-size: var(--text-base); font-weight: 600; line-height: 1.4; }
.description { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; word-break: keep-all; }
.action { margin-block-start: var(--space-2); }

import type { HTMLAttributes, ReactNode } from "react";
import styles from "./danger-zone.module.css";

export interface DangerZoneProps extends HTMLAttributes<HTMLElement> {
  title: string;
  /** What will happen, and that it cannot be undone. */
  description: ReactNode;
  /** The destructive control. Usually a danger Button, or ConfirmMorph for a second look. */
  action: ReactNode;
  /** The heading level. Default 2, for a section of a settings page. */
  headingLevel?: 2 | 3 | 4;
}

/**
 * The card at the end of a settings page holding the one action a person cannot take back. The red edge is a warning
 * about the whole area, not about an error that has happened — so the fill stays `surface` and only the border and
 * the heading carry `danger`. A filled red card reads as "something is wrong" and would cry wolf on every visit.
 *
 * Put exactly one of these on a page, last. The description says what goes and that it is final; the button says
 * what it does, not "확인".
 */
export function DangerZone({ className, title, description, action, headingLevel = 2, ...props }: DangerZoneProps) {
  const Heading = `h${headingLevel}` as "h2" | "h3" | "h4";
  return (
    <section {...props} className={[styles.zone, className].filter(Boolean).join(" ")}>
      <Heading className={styles.title}>{title}</Heading>
      <p className={styles.description}>{description}</p>
      <div className={styles.action}>{action}</div>
    </section>
  );
}

DangerZone.displayName = "DangerZone";

export default DangerZone;