import { Box, Typography } from '@mui/material'
import { styles } from '../style'
import type { CategorySeriesConfig } from '../types'

export interface CategoryLegendProps {
  series: CategorySeriesConfig[]
  colors: string[]
}

/**
 * Renders a color-coded legend for multi-series category widgets.
 */
export function CategoryLegend({ series, colors }: CategoryLegendProps) {
  if (series.length === 0) {
    return null
  }

  return (
    <Box sx={styles.legend}>
      {series.map((item, index) => (
        <Box key={item.name} sx={styles.legendItem}>
          <Box
            sx={{
              ...styles.legendDot,
              backgroundColor: item.color ?? colors[index % colors.length],
            }}
          />
          <Typography sx={styles.legendLabel}>{item.name}</Typography>
        </Box>
      ))}
    </Box>
  )
}