import { Typography, type TypographyProps } from '@mui/material'
import type { ReactNode } from 'react'

export interface ValueProps {
  children: ReactNode
  /** Override the default `text.primary` color — useful for sparkline tints. */
  color?: string
  TypographyProps?: TypographyProps
}

/**
 * Value slot for a Formula KPI — large, bold, primary text color. Composable
 * building block for custom formula layouts; the canonical {@link FormulaUI}
 * renders one of these per item.
 */
export function Value({ children, color, TypographyProps }: ValueProps) {
  return (
    <Typography
      variant='h5'
      component='span'
      sx={{
        fontWeight: 600,
        color: color ?? 'text.primary',
        lineHeight: 1,
      }}
      {...TypographyProps}
    >
      {children}
    </Typography>
  )
}