marco.pms.web/src/components/Employee/EmpOverview.jsx

import React from "react";
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">

            {/* About Heading */}
            <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
              About
            </small>

            {/* Full Name */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-user bx-xs me-2 mt-1"></i>
                <span>Full Name</span>
              </span>
              <span style={{ marginLeft: "74px" }}>:</span>
              <span className="ms-5">
                {profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
              </span>
            </div>

            {/* Status */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-check bx-xs me-2 mt-1"></i>
                <span>Status</span>
              </span>
              <span style={{ marginLeft: "96px" }}>:</span>
              <span className="ms-5">Active</span>
            </div>

            {/* Role */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-crown bx-xs me-2 mt-1"></i>
                <span>Role</span>
              </span>
              <span style={{ marginLeft: "110px" }}>:</span>
              <span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
            </div>

            {/* Gender */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-flag bx-xs me-2 mt-1"></i>
                <span>Gender</span>
              </span>
              <span style={{ marginLeft: "91px" }}>:</span>
              <span className="ms-5">{profile?.gender || <em>NA</em>}</span>
            </div>

            {/* Birth Date */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
                <span>Birth Date</span>
              </span>
              <span style={{ marginLeft: "74px" }}>:</span>
              <span className="ms-5">
                {profile?.birthDate
                  ? new Date(profile.birthDate).toLocaleDateString()
                  : <em>NA</em>}
              </span>
            </div>

            {/* Joining Date */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-calendar bx-xs me-2 mt-1"></i>
                <span>Joining Date</span>
              </span>
              <span style={{ marginLeft: "60px" }}>:</span>
              <span className="ms-5">
                {profile?.joiningDate
                  ? new Date(profile.joiningDate).toLocaleDateString()
                  : <em>NA</em>}
              </span>
            </div>

            {/* Contacts Heading */}
            <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3 mt-4">
              Contacts
            </small>

            {/* Contact Number */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
                <span>Contact</span>
              </span>
              <span style={{ marginLeft: "87px" }}>:</span>
              <span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
            </div>

            {/* Email */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex" style={{ minWidth: "160px", whiteSpace: "nowrap" }}>
                <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
                <span>Email</span>
              </span>
              <span className="me-5">:</span>
              <span>
                {profile?.email ? (
                  <a href={`mailto:${profile.email}`}>{profile.email}</a>
                ) : (
                  <em>NA</em>
                )}
              </span>
            </div>


            {/* Emergency Contact */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-user bx-xs me-2 mt-1"></i>
                <span>Emergency Contact</span>
              </span>
              <span style={{ marginLeft: "14px" }}>:</span>
              <span className="ms-5">
                {profile?.emergencyContactPerson || <em>NA</em>}
              </span>
            </div>

            {/* Emergency Phone */}
            <div className="d-flex align-items-start mb-3">
              <span className="d-flex">
                <i className="bx bx-phone bx-xs me-2 mt-1"></i>
                <span>Emergency Phone</span>
              </span>
              <span style={{ marginLeft: "25px" }}>:</span>
              <span className="ms-5">
                {profile?.emergencyPhoneNumber || <em>NA</em>}
              </span>
            </div>

            {/* Address */}
           <div className="d-flex align-items-start">
              <span className="d-flex align-items-center">
                <i className="bx bx-map bx-xs me-2 mt-1"></i>
                <span className="text-nowrap">Address</span>
              </span>

              <span style={{ marginLeft: "86px" }}>:</span>
              <span className="ms-5 text-start" >
                {profile?.currentAddress || <em>NA</em>}
              </span>
            </div>

          </div>
        </div>
      </div>
    </div>
  );
};

export default EmpOverview;