"use client"

import { use } from "react"

import { SliderEditor } from "@/components/markatty/slider-editor"
import { QueryState } from "@/components/api/query-state"
import { useSlider } from "@/hooks/api/use-sliders"

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

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