import Stack from '@material-hu/mui/Stack';
import { alpha } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import { formatUTC0DateTime } from 'src/utils/timeUtils';

export type Props = {
  date: string;
};

function DayMonthDisplay({ date }: Props) {
  return (
    <Stack
      sx={{
        alignItems: 'center',
        backgroundColor: theme => alpha(theme.palette.text.primary, 0.08),
        borderRadius: '8px',
        px: 2,
        py: 1,
      }}
    >
      <Typography
        variant="caption"
        sx={{
          textTransform: 'uppercase',
        }}
      >
        {formatUTC0DateTime(date, 'MMM')}
      </Typography>
      <Typography
        variant="subtitle2"
        sx={{
          textTransform: 'capitalize',
        }}
      >
        {formatUTC0DateTime(date, 'dd')}
      </Typography>
    </Stack>
  );
}

export default DayMonthDisplay;