import { useTranslation } from "react-i18next";
import { FaStore } from "react-icons/fa";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
import { statusType } from "../../../../config/statusType";
import { Button } from "antd";
import { CiEdit } from "react-icons/ci";
import HeaderForm from "./HeaderForm";

const PersonalDetailsForm = () => {
  const [t] = useTranslation();
  return (
    <div className="PersonalDetailsForm">
      <header className="header_form">
        <HeaderForm
          name="personal_information"
          Icon={FaStore}
          ButtonIcon={CiEdit}
        />
      </header>
      <main className="main_form_body">
        <ValidationField
          name={"id_number"}
          placeholder={"_"}
          label={"ID Number"}
        />
        <ValidationField
          name={"addition_date"}
          placeholder={"_"}
          type="Date"
          label={"Addition Date"}
        />

        <ValidationField
          name={"status"}
          placeholder={"_"}
          label={"status"}
          type="Select"
          option={statusType}
        />

        <ValidationField
          name={"full_name"}
          placeholder={"_"}
          label={"Full Name"}
        />

        <ValidationField
          name={"phone_number"}
          placeholder={"_"}
          label={"phone_number"}
        />

        <ValidationField
          name={"mobile_number"}
          placeholder={"_"}
          label={"Mobile Number"}
        />

        <ValidationField
          name={"username"}
          placeholder={"_"}
          label={"username"}
        />

        <ValidationField
          name={"seller_percentage"}
          placeholder={"_"}
          label={"Seller Percentage"}
        />
      </main>
    </div>
  );
};

export default PersonalDetailsForm;
