import React from "react";
import Avatar from "../common/Avatar";
import { useProfile } from "../../hooks/useProfile";

const EmpOverview = ({ profile }) => {
  const { loggedInUserProfile } = useProfile();
  return (
    <>
      {" "}
      <div className="row">
        <div className="col-12 mb-4">
          <div className="card">
            <div className="card-body">
              <small className="card-text text-uppercase text-body-secondary small">
                About
              </small>
              <ul className="list-unstyled my-3 py-1">
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-user"></i>
                  <span className="fw-medium mx-2">Full Name:</span>{" "}
                  <span>{`${profile?.firstName} ${profile?.lastName}`}</span>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-check"></i>
                  <span className="fw-medium mx-2">Status:</span>{" "}
                  <span>Active</span>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-crown"></i>
                  <span className="fw-medium mx-2">Role:</span>{" "}
                  <span> {profile?.jobRole || <em>NA</em>}</span>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-flag"></i>
                  <span className="fw-medium mx-2">Gender:</span>{" "}
                  <span> {profile?.gender || <em>NA</em>}</span>
                </li>{" "}
                <li className="d-flex align-items-center mb-2">
                  <i className="icon-base bx bx-calendar "></i>
                  <span className="fw-medium mx-2">Birth Date:</span>{" "}
                  <span>
                    {profile?.birthDate ? (
                      new Date(profile.birthDate).toLocaleDateString()
                    ) : (
                      <em>NA</em>
                    )}
                  </span>
                </li>
                <li className="d-flex align-items-center mb-2">
                  <i className="icon-base bx bx-calendar "></i>
                  <span className="fw-medium mx-2">Joining Date:</span>{" "}
                  <span>
                    {profile?.joiningDate ? (
                      new Date(profile.joiningDate).toLocaleDateString()
                    ) : (
                      <em>NA</em>
                    )}
                  </span>
                </li>
              </ul>
              <small className="card-text text-uppercase text-body-secondary small">
                Contacts
              </small>
              <ul className="list-unstyled my-3 py-1">
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-phone"></i>
                  <span className="fw-medium mx-2">Contact:</span>{" "}
                  <span> {profile?.phoneNumber || <em>NA</em>}</span>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-envelope"></i>
                  <span className="fw-medium mx-2">Email:</span>{" "}
                  <a href={`mailto:${profile?.email}`}>
                    {" "}
                    {profile?.email || <em>NA</em>}
                  </a>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-user"></i>
                  <span className="fw-medium mx-2">
                    {" "}
                    Emergency Contact:
                  </span>{" "}
                  <span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
                </li>
                <li className="d-flex align-items-center mb-4">
                  <i className="icon-base bx bx-phone"></i>
                  <span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
                  <span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
                </li>
                <li className="d-flex align-items-center ">
                  <div className="container p-0">
                    <div className="fw-medium text-start">
                      <i className="icon-base bx bx-map "></i> Address:
                    </div>
                    <div className="text-start ms-7">
                      {profile?.currentAddress || <em>NA</em>}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default EmpOverview;
