"use client";

import { FolderOutlined } from "@ant-design/icons";
import { Divider, Form, Input, Typography } from "antd";

import { CmsSectionTitle } from "@/components/admin/CmsSectionTitle";

export function CategoryFormFields() {
  return (
    <>
      <CmsSectionTitle
        className="mb-2"
        icon={<FolderOutlined />}
        title="Category details"
        description="Choose a clear name and a short URL slug. The slug appears in post URLs."
      />
      <Divider className="!my-6" />
      <Form.Item
        label="Name"
        name="name"
        className="!mb-6"
        rules={[{ required: true, message: "Name is required" }]}
      >
        <Input size="large" placeholder="e.g. Tin tức" autoComplete="off" />
      </Form.Item>
      <Form.Item
        label="Slug"
        name="slug"
        className="!mb-2"
        rules={[{ required: true, message: "Slug is required" }]}
        extra={
          <Typography.Text type="secondary" className="text-xs">
            Lowercase letters, numbers, and hyphens only.
          </Typography.Text>
        }
      >
        <Input size="large" placeholder="e.g. tin-tuc" autoComplete="off" />
      </Form.Item>
    </>
  );
}