"use client";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { WorkingGroupChartCard } from "@/features/pswg/working-group/components/charts/working-group-chart-card";
import { ExportIconButton } from "@/features/pswg/working-group/components/charts/export-icon-button";
import { WorkingGroupDonutChart } from "@/features/pswg/working-group/components/charts/working-group-donut-chart";
import {
  overallStatusCounts,
  overallStatusData,
} from "@/features/pswg/working-group/working-group-data";

export function OverallStatusCard() {
  const theme = useTheme();

  return (
    <WorkingGroupChartCard
      title="Overall Implementation Status"
      action={<ExportIconButton />}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: { xs: "column", sm: "row" },
          alignItems: "center",
          justifyContent: "space-between",
          gap: 2.5,
        }}
      >
        <Box sx={{ width: { xs: "100%", sm: 280 } }}>
          <WorkingGroupDonutChart
            centerLabel="Total Issues"
            centerValue="20"
            data={overallStatusData}
            height={220}
          />
        </Box>

        <Box sx={{ display: "flex", flexDirection: "column", gap: 1.25, minWidth: 0 }}>
          {overallStatusCounts.map((item) => (
            <Box key={item.label} sx={{ display: "flex", alignItems: "center", gap: 1.25 }}>
              <Box
                sx={{
                  width: 10,
                  height: 10,
                  borderRadius: "50%",
                  bgcolor: item.color,
                  flexShrink: 0,
                }}
              />

              <Typography
                sx={{
                  minWidth: 100,
                  color: theme.palette.text.secondary,
                  fontSize: 12,
                }}
              >
                {item.label}
              </Typography>

              <Typography
                sx={{
                  color: theme.palette.text.primary,
                  fontSize: 13,
                  fontWeight: 700,
                }}
              >
                ({item.count})
              </Typography>
            </Box>
          ))}
        </Box>
      </Box>
    </WorkingGroupChartCard>
  );
}