// app/admin/[entity]/page.tsx

import { Header } from "@/components/header"
import { Main } from "@/components/main"
import { ProfileDropdown } from "@/components/profile-dropdown"
import { ThemeSwitch } from "@/components/theme-switch"

import { getField } from "@/services/myfields"
import { MyFieldsForm } from "../../../form/myfield-form"

export default async function AdminMyFieldsEditPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {

  const { id } = await params

  console.log("Fetching data for field with ID:", id)
  const ResponseData = await getField(id)

  return (
    <>
      {/* ===== Top Heading ===== */}
      <Header>
        <h2 className="text-lg font-semibold">
          Edit MyField
        </h2>

        <div className="ms-auto flex items-center space-x-4">
          <ThemeSwitch />
          <ProfileDropdown />
        </div>
      </Header>

      {/* ===== Main ===== */}
      <Main className="flex flex-1 flex-col gap-4 sm:gap-6">
        <div className="flex flex-wrap items-end justify-between gap-2">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">
              Edit Field
            </h2>
            <p className="text-muted-foreground">
              Here&apos;s a fields of your <strong>myfields </strong>with their
              details and actions you can perform on them.
            </p>
          </div>
        </div>
        <MyFieldsForm values={ResponseData} />
      </Main>
    </>
  )
}