"use client"

import { useEffect, useState } from "react"

import { Button } from "@/components/ui/button"

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

export function NewTicketDialogDeferred() {
  const [mounted, setMounted] = useState(false)

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

  if (!mounted) {
    return (
      <Button
        size="sm"
        className="rounded-lg border border-black bg-black px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30"
        disabled
        aria-disabled
      >
        Novo ticket
      </Button>
    )
  }

  return <NewTicketDialog />
}
