import { FC } from "react";
import DropdownList from "../common/Dropdown";
import { InputField, Select } from "../forms/Inputs";

const VendorBillForm: FC = () => {
  return (
    <>
      <div className="grid grid-cols-2 gap-4">
        <div className="left">
          <div>
            <label htmlFor="" className="mt-1 mb-1 block">
              Bill Purpose
            </label>
            <DropdownList
              name="expense_type"
              placeholder="Expense Type"
              idName="bill.expense_type_id"
              getLabel={(expense_type) => expense_type?.name}
              isMulti={false}
            />
          </div>
          <div className="mt-1">
            <InputField
              name="bill.amount"
              placeholder="Amount"
              labelText="Amount"
            />
          </div>
        </div>
        <div className="right">
          <div>
            <Select
              labelText="Bill Type"
              name="bill.bill_type"
              options={[
                { value: 1, label: "One Time" },
                { value: 2, label: "Multiple" },
              ]}
            />
          </div>
          <div className="mt-1">
            <InputField labelText="Note" name="bill.note" placeholder="Notes" />
          </div>
        </div>
      </div>
    </>
  );
};

export default VendorBillForm;