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

export default function LabelValue({
  label,
  value,
  reverse = false,
  labelsx,
  valuesx,
  sx,
}: {
  label: string | ReactNode
  value?: ReactNode
  reverse?: boolean
  labelsx?: any
  valuesx?: any
  sx?: any
}) {
  return (
    <Stack
      flexDirection={reverse ? 'column-reverse' : 'column'}
      gap="6px"
      sx={sx}
    >
      <Typography variant="subtitle2" sx={labelsx}>
        {label}
      </Typography>
      <Typography paragraph fontWeight={600} sx={valuesx}>
        {value ?? '-'}
      </Typography>
    </Stack>
  )
}
