Dialog

"use client"

import { useEffect, useRef, type ReactNode } from "react"
import { X } from "lucide-react"
import SiteIcon from "@/components/site-icon"

interface DialogProps {
  open: boolean
  onClose: () => void
  title: string
  description?: string
  size?: "sm" | "md" | "lg"
  primaryAction?: { label: string; onClick: () => void; tone?: "default" | "destructive" }
  secondaryAction?: { label: string; onClick: () => void }
  children?: ReactNode
}

export function Dialog({ open, onClose, title, description, size = "md", primaryAction, secondaryAction, children }: DialogProps) {
  const ref = useRef<HTMLDialogElement>(null)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    if (open && !el.open) el.showModal()
    if (!open && el.open) el.close()
  }, [open])
  return (
    <dialog ref={ref} className={`ds-dialog ds-dialog--${size}`} onClose={onClose}>
      <div className="ds-dialog__head">
        <div>
          <p className="ds-dialog__title">{title}</p>
          {description ? <p className="ds-dialog__description">{description}</p> : null}
        </div>
        <button onClick={onClose} aria-label="Close" className="ds-dialog__close">
          <SiteIcon icon={X} size="sm" tone="muted" />
        </button>
      </div>
      {children ? <div className="ds-dialog__body">{children}</div> : null}
      {primaryAction || secondaryAction ? (
        <div className="ds-dialog__actions">
          {secondaryAction ? (
            <button className="ds-btn ds-btn--ghost ds-btn--sm" onClick={secondaryAction.onClick}>
              {secondaryAction.label}
            </button>
          ) : null}
          {primaryAction ? (
            <button
              className={`ds-btn ${primaryAction.tone === "destructive" ? "ds-btn--destructive" : "ds-btn--primary"} ds-btn--sm`}
              onClick={primaryAction.onClick}
            >
              {primaryAction.label}
            </button>
          ) : null}
        </div>
      ) : null}
    </dialog>
  )
}