import EditField from "@/app/component/EditField";
import ContentText from "@/app/component/ContentText";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
import { validate_phone_number } from "./validate";

const list = [
  { label: "بانک 1", id: 10 },
  { label: "بانک 2", id: 20 },
  { label: "بانک 3", id: 30 },
  { label: "بانک 4", id: 40 },
];

function Form({ data, changeData, updateNum }) {
  return (
    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
      <ContentText text="شماره کارت">
        <EditField
          isTransparent={true}
          iconGray={true}
          changeData={updateNum}
          data={data.card}
          noDisable={true}
          type="number"
          placeholder="شماره کارت خود را بنویسید..."
          name="card"
          props={{
            inputProps: validate_phone_number,
          }}
        />
      </ContentText>
      <ContentText text="شماره شبا">
        <EditField
          isTransparent={true}
          iconGray={true}
          changeData={updateNum}
          data={data.shaba}
          noDisable={true}
          type="number"
          placeholder="شماره شبا خود را بنویسید..."
          name="shaba"
          props={{
            inputProps: validate_phone_number,
          }}
        />
      </ContentText>
      <ContentText text="بانک">
        <AutoCompleteSelect
          updateData={changeData}
          label="انتخاب بانک...."
          name="bank"
          list={list}
        />
      </ContentText>
    </div>
  );
}

export default Form;