import { Typography } from '@mui/material';
import type { TypographyProps } from '@mui/material';

type Props = { amount: string } & TypographyProps;

export default function PaymentAmount({ amount, sx = {} }: Props) {
  return (
    <Typography
      component="div"
      sx={{
        my: 0.5,
        fontWeight: 600,
        fontSize: '2.1875rem',
        letterSpacing: '-0.03rem',
        fontVariantNumeric: 'tabular-nums',
        ...sx,
      }}>
      {amount}
    </Typography>
  );
}