import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../../ValidationField/ValidationField";
import {
  Sex_Select_options_Student,
  nationalities,
  religion_Select_options,
} from "../../../../../types/App";

const PersonalDetails = () => {
  return (
    <Row>
      <Col xs="8" sm="8">
        <ValidationField name="email" label="email" />
        <div className="TowValidationItems">
          <ValidationField name="first_name" label="first_name" />
          <ValidationField name="last_name" label="last_name" />
        </div>

        <div className="TowValidationItems">
          <ValidationField name="username" label="username" />

          <ValidationField name="password" label="password" />
        </div>

        <div className="TowValidationItems">
          <ValidationField
            name="nationality"
            type="LocalSearch"
            option={nationalities}
            label="nationality"
            placeholder="nationality"
          />
          <ValidationField
            name="religion"
            type="Select"
            option={religion_Select_options}
            no_label
            placeholder="religion"
          />
        </div>
        <div className="TowValidationItems">
          <ValidationField
            name="birthday"
            type="Date"
            label="birthday"
            placeholder="birthday"
          />
          <ValidationField
            name="birth_place"
            no_label
            placeholder="birth_place"
          />
        </div>

        <ValidationField
          name="sex"
          label="sex"
          type="Select"
          option={Sex_Select_options_Student}
          placeholder="sex"
        />
      </Col>

      <Col xs="4" sm="4">
        <ValidationField name="image" type="DropFile" label="image" />
      </Col>
    </Row>
  );
};

export default PersonalDetails;
