import React from "react";
import { useDashboardPendingAttendenceData } from "../../hooks/useDashboard_Data";

const PendingAttendance = () => {
  const { PendingAttendenceData } = useDashboardPendingAttendenceData();

  return (
    <div className="card p-3 h-100 text-center d-flex justify-content-between">
      <div className="d-flex justify-content-start align-items-center mb-3">
        <h5 className="fw-bold mb-0 ms-2">
          <i className="bx bx-group text-warning"></i> Pending Attendence
        </h5>
      </div>
      <div className="d-flex justify-content-around align-items-start mt-n2">
        <div>
          <h4 className="mb-0 fw-bold">
            {PendingAttendenceData.pendingCheckOut?.toLocaleString()}
          </h4>
          <small className="text-muted">Checkout</small>
        </div>
        <div>
          <h4 className="mb-0 fw-bold">
            {PendingAttendenceData.pendingRegularization?.toLocaleString()}
          </h4>
          <small className="text-muted">Regularization</small>
        </div>
      </div>
    </div>
  );
};

export default PendingAttendance;