import ContentText from "@/app/component/ContentText";
import EditField from "@/app/component/EditField";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";

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

function Form({ data, changeData }) {
  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}
          placeholder="شماره کارت خود را بنویسید..."
          iconGray={true}
          changeData={changeData}
          data={data.card}
          noDisable={true}
          name="card"
        />
      </ContentText>
      <ContentText text="شماره شبا">
        <EditField
          isTransparent={true}
          placeholder="شماره شبا خود را بنویسید..."
          iconGray={true}
          changeData={changeData}
          data={data.shaba}
          noDisable={true}
          name="card"
        />
      </ContentText>
      <ContentText text="بانک">
        <AutoCompleteSelect
          updateData={changeData}
          label="انتخاب بانک...."
          name="bank"
          list={list}
        />
      </ContentText>
    </div>
  );
}

export default Form;
