"use client";

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

type WorkingGroupLegendProps = {
  items: {
    label: string;
    color: string;
  }[];
  justifyContent?: "flex-start" | "center" | "space-between";
  trailingLabel?: string;
};

export function WorkingGroupLegend({
  items,
  justifyContent = "center",
  trailingLabel,
}: WorkingGroupLegendProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        mt: "auto",
        pt: 2,
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent,
        gap: 2,
      }}
    >
      {items.map((item) => (
        <Box key={item.label} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Box
            sx={{
              width: 9,
              height: 9,
              borderRadius: "50%",
              bgcolor: item.color,
            }}
          />
          <Typography sx={{ color: theme.palette.text.secondary, fontSize: 12 }}>
            {item.label}
          </Typography>
        </Box>
      ))}

      {trailingLabel ? (
        <Typography
          sx={{
            ml: { xs: 0, md: "auto" },
            color: theme.palette.text.secondary,
            fontSize: 12,
            fontWeight: 600,
          }}
        >
          {trailingLabel}
        </Typography>
      ) : null}
    </Box>
  );
}