"use client";

import { useForm } from "@refinedev/antd";
import { Button, Card, Form } from "antd";
import type { CategoryRecord } from "@/types/category";

import { PageContainer } from "@/components/admin/PageContainer";
import { CategoryFormFields } from "../category-form-fields";

const FORM_ID = "category-create-form";

export default function NewCategoryPage() {
  const { formProps, saveButtonProps } = useForm<CategoryRecord>({
    resource: "categories",
    action: "create",
    redirect: "list",
  });

  return (
    <PageContainer>
      <Card
        className="cms-crud-card overflow-hidden !border-[rgba(15,23,42,0.08)]"
        styles={{ body: { padding: 0 } }}
      >
        <div className="border-b border-[rgba(15,23,42,0.08)] px-8 pb-6 pt-8">
          <h1 className="m-0 text-2xl font-semibold tracking-tight text-[rgba(15,23,42,0.92)]">
            New category
          </h1>
          <p className="mb-0 mt-1 text-[15px] leading-relaxed text-[rgba(15,23,42,0.52)]">
            Add a topic used when creating or editing posts.
          </p>
        </div>

        <Form
          id={FORM_ID}
          {...formProps}
          layout="vertical"
          requiredMark
          className="mx-auto w-full max-w-[560px] px-8 pb-2 pt-6"
        >
          <CategoryFormFields />
        </Form>

        <div className="flex justify-end border-t border-[rgba(15,23,42,0.08)] bg-[rgba(15,23,42,0.02)] px-8 py-4">
          <Button
            {...saveButtonProps}
            form={FORM_ID}
            type="primary"
            size="large"
            htmlType="submit"
            className="min-w-[168px]"
          >
            Create category
          </Button>
        </div>
      </Card>
    </PageContainer>
  );
}