"use client"

import { use } from "react"

import { ThemeEditor } from "@/components/admin-content/theme-editor"
import { QueryState } from "@/components/api/query-state"
import { useTheme } from "@/hooks/api/use-themes"

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

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