"use client"

import { use } from "react"

import { FaqEditor } from "@/components/admin-content/faq-editor"
import { QueryState } from "@/components/api/query-state"
import { useFaq } from "@/hooks/api/use-faqs"

export default function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params)
  const { data: faq, isLoading, isError, error } = useFaq(id)

  return (
    <QueryState
      isLoading={isLoading}
      isError={isError}
      error={error instanceof Error ? error : null}
    >
      {faq && <FaqEditor key={faq.id} mode="edit" faq={faq} />}
    </QueryState>
  )
}