"use client";

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

type PlenaryLegendItem = {
  label: string;
  color: string;
};

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

export function PlenaryLegend({
  items,
  justifyContent = "center",
  trailingLabel,
}: PlenaryLegendProps) {
  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}-${item.color}`}
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
          }}
        >
          <Box
            sx={{
              width: 9,
              height: 9,
              borderRadius: "50%",
              bgcolor: item.color,
              flexShrink: 0,
            }}
          />

          <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>
  );
}