import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "@/lib/cn";
import { Button } from "./button";

export function Dialog({
  open,
  onOpenChange,
  title,
  children,
  footer,
  wide,
}: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  title: string;
  children: ReactNode;
  footer?: ReactNode;
  wide?: boolean;
}) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-ink/40" />
        <DialogPrimitive.Content
          className={cn(
            "fixed z-50 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-line rounded-lg shadow-[var(--shadow-pop)] flex flex-col max-h-[88vh]",
            wide ? "w-[min(720px,94vw)]" : "w-[min(520px,94vw)]",
          )}
        >
          <div className="flex items-start gap-3 px-4 py-3.5 border-b border-line">
            <DialogPrimitive.Title className="text-[16px] font-semibold tracking-tight flex-1">
              {title}
            </DialogPrimitive.Title>
            <DialogPrimitive.Close asChild>
              <Button variant="ghost" size="sm" aria-label="Close">
                <X className="size-3.5" />
              </Button>
            </DialogPrimitive.Close>
          </div>
          <div className="px-4 py-4 overflow-y-auto flex-1">{children}</div>
          {footer ? (
            <div className="px-4 py-3 border-t border-line bg-sunken flex items-center justify-end gap-2 rounded-b-lg">
              {footer}
            </div>
          ) : null}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}