import React, { useCallback, useEffect, useState } from "react";
import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
import eventBus from "../../services/eventBus";

const Teams = () => {
  const { teamsCardData } = useDashboardTeamsCardData();
  const[totalEmployees,setTotalEmployee] = useState(0);
  const[inToday,setInToday] = useState(0);

  useEffect(() =>{
    setTotalEmployee(teamsCardData.totalEmployees)
    setInToday(teamsCardData.inToday)
  },[teamsCardData.totalEmployees,teamsCardData.inToday])

  const handler = useCallback(
    (msg) => {
      if (msg.activity == 1) {
        setInToday(prev => prev + 1);
      }
    },
    [inToday]
  );
  useEffect(() => {
    eventBus.on("attendance", handler);
    return () => eventBus.off("attendance", handler);
  }, [handler]);
  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> Teams
        </h5>
      </div>
      <div className="d-flex justify-content-around align-items-start mt-n2">
        <div>
          <h4 className="mb-0 fw-bold">
            {totalEmployees?.toLocaleString()}
          </h4>
          <small className="text-muted">Total Employees</small>
        </div>
        <div>
          <h4 className="mb-0 fw-bold">
            {inToday?.toLocaleString()}
          </h4>
          <small className="text-muted">In Today</small>
        </div>
      </div>
    </div>
  );
};

export default Teams;