import React from "react";
import { Form, Input, TextArea } from "antd-mobile";
import styles from "./BasicInfo.module.scss";

interface BasicInfoProps {
  data: {
    name: string;
    description: string;
    remarks: string;
  };
  onChange: (data: any) => void;
}

const BasicInfo: React.FC<BasicInfoProps> = ({ data, onChange }) => {
  const handleChange = (field: string, value: string) => {
    onChange({ [field]: value });
  };

  return (
    <div className={styles.container}>
      <div className={styles.card}>
        <div className={styles.sectionTitle}>计划设置</div>

        <Form layout="vertical">
          <Form.Item
            label={
              <span className={styles.label}>
                计划名称<span className={styles.required}>*</span>
              </span>
            }
          >
            <Input
              placeholder="请输入计划名称"
              value={data.name}
              onChange={value => handleChange("name", value)}
              clearable
            />
          </Form.Item>

          <Form.Item
            label={<span className={styles.label}>计划描述</span>}
          >
            <Input
              placeholder="请输入计划描述 (可选)"
              value={data.description}
              onChange={value => handleChange("description", value)}
              clearable
            />
          </Form.Item>

          <Form.Item
            label={<span className={styles.label}>详细备注</span>}
          >
            <TextArea
              placeholder="请输入备注说明..."
              value={data.remarks}
              onChange={value => handleChange("remarks", value)}
              rows={4}
              autoSize={{ minRows: 4, maxRows: 8 }}
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default BasicInfo;
