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

export interface SuffixProps {
  children: ReactNode
  TypographyProps?: TypographyProps
}

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