import React from "react";
import { Col, Row } from "reactstrap";
import CustomFile from "./ui/File";
import ValidationField from "../../../Components/ValidationField/ValidationField";
import { nationalities, religion_Select_options } from "../../../types/App";

const Form = () => {
  return (
    <Row>
      <Col className="ImageCol">
        <CustomFile />
      </Col>
      <Col>
        <ValidationField name="first_name" label="first_name" />
        <ValidationField name="last_name" label="last_name" />
        <ValidationField name="email" label="email" />

        <ValidationField
          name="nationality"
          type="LocalSearch"
          option={nationalities}
          label="nationality"
          placeholder="nationality"
        />
      </Col>
      <Col>
        <ValidationField
          name="religion"
          type="Select"
          option={religion_Select_options}
          placeholder="religion"
        />
        <ValidationField
          name="birthday"
          type="Date"
          label="birthday"
          placeholder="birthday"
        />
        <ValidationField name="birth_place" placeholder="birth_place" />
        <ValidationField name="password" label="password" />
      </Col>
    </Row>
  );
};

export default Form;
