"use client"

import { useTranslations } from "next-intl"

import { TicketDetailView } from "@/components/support/ticket-detail-view"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
import { Link, useRouter } from "@/i18n/navigation"

export function TicketViewClient({
  id,
  focusReply,
}: {
  id: string
  focusReply: boolean
}) {
  const t = useTranslations("Tickets")
  const tc = useTranslations("Common")
  const router = useRouter()

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader
        title={t("view.title")}
        actions={
          <Button variant="outline" type="button" onClick={() => router.back()}>
            {tc("actions.back")}
          </Button>
        }
      />

      <TicketDetailView
        ticketId={id}
        focusReplyOnMount={focusReply}
        onDeleted={() => router.back()}
      />
    </div>
  )
}