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

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

  if (!prefix) {
    return null
  }

  return <Item {...props}>{prefix}</Item>
}