
import { Doughnut } from "react-chartjs-2";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
} from "chart.js";
import { FaUser } from "react-icons/fa";

// ✅ Register required components
ChartJS.register(ArcElement, Tooltip, Legend);

const SemiDoughnutChart = ({ totalUser }: { totalUser: any }) => {
  const dataSource = totalUser ?? {}

  const recruiterCount =
    dataSource.past24hourRecruiterCount ??
    dataSource.totalRecruiterCount ??
    dataSource.newRecuiterCount ??
    0;

  const customerCount =
    dataSource.past24hourCustomercount ??
    dataSource.totalCustomerCount ??
    dataSource.newCustomerCount ??
    0;



  // 📊 Chart Data
  const data = {
    labels: ["Recruiter", "Customer"],
    datasets: [
      {
        data: [recruiterCount, customerCount], // Values
        backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
        borderWidth: 0, // No border
        cutout: "90%", // Makes it a doughnut shape
        circumference: 270, // Semi-circle
        rotation: 225, // Starts from the top

      },
    ],
  };

  // ⚙️ Chart Options
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { display: false }, // Hide legend
      tooltip: { enabled: true },
    },
  };

  return (
    <div style={{ position: "relative" }}>
      <Doughnut data={data} options={options} />
      <div
        style={{
          position: "absolute",
          top: "55%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          fontSize: "20px",
          fontWeight: "bold",
          color: "#3D5AFE",
          backgroundColor: '#ECEAF8',
          padding: '15px',
          borderRadius: '50%'
        }}
      >
        <FaUser />
      </div>
    </div>
  );
};

export default SemiDoughnutChart;
