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

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

/**
 * Prefix 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 `prefix` is set.
 */
export function Prefix({ children, TypographyProps }: PrefixProps) {
  return (
    <Typography
      variant='h5'
      component='span'
      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}
      {...TypographyProps}
    >
      {children}
    </Typography>
  )
}