// 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 { TableConfig } from "@/config/table"
import { MyFieldsForm } from "../../form/myfield-form"

export default async function AdminCreatePage({
  params,
}: {
  params: Promise<{ entity: string }>
}) {
  const entity = "myfields" // For now, we can hardcode this since it's specific to the myfields page. Adjust as needed.

  const fields = TableConfig[entity as keyof typeof TableConfig].fields

  return (
    <>
      {/* ===== Top Heading ===== */}
      <Header>
        <h2 className="text-lg font-semibold">
          {entity.charAt(0).toUpperCase() + entity.slice(1)}
        </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">
              Create {entity.charAt(0).toUpperCase() + entity.slice(1)}
            </h2>
            <p className="text-muted-foreground">
              Here&apos;s a fields of your <strong>{entity} </strong>with their
              details and actions you can perform on them.
            </p>
          </div>
        </div>
        {(() => {
          const MyFieldsFormAny = MyFieldsForm as any
          return <MyFieldsFormAny entity={entity} fields={fields} />
        })()}
      </Main>
    </>
  )
}