"use client"

import { useEffect, useState } from "react"

import { NewTicketDialog } from "./new-ticket-dialog"

type DeferredProps = {
  triggerClassName?: string
  triggerVariant?: "button" | "card"
}

export function NewTicketDialogDeferred({ triggerClassName, triggerVariant = "button" }: DeferredProps = {}) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div
        className={
          triggerVariant === "card"
            ? `h-28 min-w-[220px] rounded-2xl border border-slate-900 bg-neutral-900/80 text-white shadow-sm ${triggerClassName ?? ""}`
            : `rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white opacity-60 ${triggerClassName ?? ""}`
        }
      />
    )
  }

  return <NewTicketDialog triggerClassName={triggerClassName} triggerVariant={triggerVariant} />
}
