import { Avatar } from '@mui/material'
import type { FormulaWidgetState, ValueProps } from '../types'
import { useWidgetSelector } from '../../stores/use-widget-selector'

/**
 * Renders a colored avatar badge showing the first letter of the series name for multi-value formula widgets.
 */
export function Series({ id, index = 0 }: Pick<ValueProps, 'id' | 'index'>) {
  const serie = useWidgetSelector(
    id,
    (w) => (w as FormulaWidgetState | undefined)?.series?.[index],
  )
  if (!serie) {
    return null
  }

  const { name, color } = serie

  return (
    <Avatar
      sx={{
        bgcolor: color,
        width: 32,
        height: 32,
        fontSize: '0.875rem',
        fontWeight: 'medium',
        ...(color && {
          color: (theme) => theme.palette.getContrastText(color),
        }),
      }}
    >
      {name.charAt(0).toUpperCase()}
    </Avatar>
  )
}