"use client";

import type { Control } from "react-hook-form";

import { transactionFieldLabels } from "@/components/form/common/field-labels";
import { formSpanFull } from "@/components/form/common/form-layout";
import { FormSectionLayout } from "@/components/form/common/form-section-layout";
import { DateField } from "@/components/form/fields/date-field";
import { SelectField } from "@/components/form/fields/select-field";
import { TextAreaField } from "@/components/form/fields/text-area-field";
import { TextField } from "@/components/form/fields/text-field";
import type { CommonTransactionFormValues } from "@/components/form/schemas/transaction-schema";

const bankOptions = ["BOS", "HSBC", "UBS", "DBS", "JPM", "CITI", "SCB"] as const;

type TransactionDetailsSectionProps = {
  control: Control<CommonTransactionFormValues>;
};

export function TransactionDetailsSection({ control }: TransactionDetailsSectionProps) {
  return (
    <FormSectionLayout>
      <DateField control={control} name="t_date" label={transactionFieldLabels.t_date} />
      <DateField control={control} name="p_date" label={transactionFieldLabels.p_date} />
      <TextField control={control} name="r_no" label={transactionFieldLabels.r_no} />
      <TextField control={control} name="user_id" label={transactionFieldLabels.user_id} />
      <SelectField control={control} name="bank" label={transactionFieldLabels.bank} options={bankOptions} />
      <TextField control={control} name="purpose" label={transactionFieldLabels.purpose} />
      <TextField control={control} name="status" label={transactionFieldLabels.status} />
      <TextAreaField
        control={control}
        name="remarks"
        label={transactionFieldLabels.remarks}
        className={formSpanFull}
      />
    </FormSectionLayout>
  );
}