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

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

/**
 * Small subdued caption rendered below a Formula value. Use for short
 * descriptive text (e.g. "Last 7 days", "Excludes refunds").
 */
export function Note({ children, TypographyProps }: NoteProps) {
  return (
    <Typography
      variant='caption'
      component='p'
      color='text.secondary'
      sx={{ m: 0 }}
      {...TypographyProps}
    >
      {children}
    </Typography>
  )
}