import { FormEvent } from "react";
import { Button } from "@/components/ui/button";
import type { CropFormValues } from "./types";

interface CropFormProps {
  values: CropFormValues;
  submitting: boolean;
  onChange: (key: keyof CropFormValues, value: string) => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
}

export function CropForm({ values, submitting, onChange, onSubmit }: CropFormProps) {
  return (
    <form className="card-agriculture grid gap-5 p-5 md:p-6" onSubmit={onSubmit}>
      <div className="flex items-start gap-3">
        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-secondary text-sm font-black text-secondary-foreground">01</span>
        <div>
          <h2 className="text-xl font-black tracking-tight text-card-foreground">新增作物</h2>
          <p className="mt-1 text-sm leading-6 text-muted-foreground">填写作物名称即可写入数据库，创建用户将由后端从当前登录态自动写入。</p>
        </div>
      </div>
      <label className="grid gap-2 text-sm font-black text-card-foreground">
        <span>作物名称</span>
        <input className="input-agriculture" value={values.cropName} onChange={(event) => onChange("cropName", event.target.value)} placeholder="例如：maize / rice / wheat" />
      </label>
      <Button variant="agriculture" size="lg" type="submit" disabled={submitting || !values.cropName.trim()}>
        {submitting ? "正在写入 crop 表..." : "保存作物"}
      </Button>
    </form>
  );
}
