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

/**
 * Renders the suffix content (e.g., unit label) after a formula value, if defined in the data item.
 */
export function Suffix({ id, index = 0, ...props }: ValueProps) {
  const suffix = useWidgetSelector(
    id,
    (w) => (w as FormulaWidgetState | undefined)?.data?.[index]?.suffix,
  )

  if (!suffix) {
    return null
  }

  return (
    <Item
      TypographyProps={{
        color: (theme: Theme) => theme.palette.text.secondary,
      }}
      {...props}
    >
      {suffix}
    </Item>
  )
}