"use client";

import * as DialogPrimitive from "@radix-ui/react-dialog";

import { X } from "lucide-react";

import { cn } from "@/lib/utils";

export const Dialog = DialogPrimitive.Root;

export const DialogTrigger = DialogPrimitive.Trigger;

export const DialogClose = DialogPrimitive.Close;

export function DialogContent({

  className,

  children,

  title,

  ...props

}: React.ComponentProps<typeof DialogPrimitive.Content> & { title?: string }) {

  return (

    <DialogPrimitive.Portal>

      <DialogPrimitive.Overlay className="fixed inset-0 z-[var(--z-modal)] bg-black/55 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />

      <DialogPrimitive.Content

        className={cn(

          "fixed left-1/2 top-1/2 z-[var(--z-modal)] w-[min(92vw,520px)] -translate-x-1/2 -translate-y-1/2",

          "ring-frame overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-default)]",

          "bg-[var(--color-bg-overlay)] shadow-[var(--shadow-pop)] focus:outline-none",

          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",

          className,

        )}

        {...props}

      >

        {title ? (

          <div className="flex items-center justify-between border-b border-[var(--color-border-subtle)] px-4 py-3">

            <DialogPrimitive.Title className="text-sm font-semibold text-[var(--color-fg-primary)]">

              {title}

            </DialogPrimitive.Title>

            <DialogPrimitive.Close

              className="rounded-[var(--radius-sm)] text-[var(--color-fg-tertiary)] transition-colors hover:text-[var(--color-fg-primary)]"

              aria-label="Close"

            >

              <X className="h-4 w-4" aria-hidden />

            </DialogPrimitive.Close>

          </div>

        ) : null}

        {children}

      </DialogPrimitive.Content>

    </DialogPrimitive.Portal>

  );

}