Modal

"use client";

import type { ReactNode } from "react";
import { Dialog } from "radix-ui";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ModalProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  title: string;
  description?: string;
  /** Emoji or node shown in a pastel circle above the title. */
  icon?: ReactNode;
  tone?: "peach" | "mint" | "lavender" | "butter";
  children?: ReactNode;
  footer?: ReactNode;
  size?: "sm" | "md" | "lg";
  da?: string;
  className?: string;
}

export const ModalClose = Dialog.Close;

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12",
  butter: "bg-da-warning/30",
} as const;
const SIZES = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-xl" } as const;

/** Soft modal (Radix Dialog): big rounded white card that pops in with a small bounce, pastel icon circle, round close button, body and footer pills. */
export function Modal({
  trigger,
  open,
  defaultOpen,
  onOpenChange,
  title,
  description,
  icon,
  tone = "lavender",
  children,
  footer,
  size = "md",
  da = "soft-flat",
  className,
}: ModalProps) {
  return (
    <Dialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className={cn(
            "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[28px] bg-da-surface text-da-surface-fg shadow-da-lg outline-none",
            "transition-[opacity,scale] duration-(--da-duration-slow) ease-da-emphasized starting:scale-90 starting:opacity-0 motion-reduce:transition-none",
            SIZES[size],
            className,
          )}
        >
          <Dialog.Close
            aria-label="Close"
            className="da-focus absolute top-4 right-4 grid size-9 place-items-center rounded-full bg-da-surface-2 hover:bg-da-muted"
          >
            <X aria-hidden className="size-4" />
          </Dialog.Close>
          <div className="overflow-y-auto p-7">
            {icon && (
              <span aria-hidden className={cn("mb-4 grid size-14 place-items-center rounded-full text-2xl", TONES[tone])}>
                {icon}
              </span>
            )}
            <Dialog.Title className="pr-8 font-da-display text-2xl font-extrabold tracking-da-display">{title}</Dialog.Title>
            {description ? (
              <Dialog.Description className="mt-2 text-da-muted-fg">{description}</Dialog.Description>
            ) : (
              <Dialog.Description className="sr-only">{title}</Dialog.Description>
            )}
            {children && <div className="mt-5">{children}</div>}
          </div>
          {footer && <div className="flex flex-col-reverse gap-2 px-7 pb-7 sm:flex-row sm:justify-end">{footer}</div>}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default Modal;