import React, { memo } from 'react';
import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';

import createClasses from './styles';

export interface InfoCardWithDateProps {
  /**
   * The top text of card.
   */
  title?: string;
  /**
   * The main content of the card.
   */
  data?: string;
  /**
   * Info about the last text.
   */
  dateDescription?: string;
  /**
   * The bottom text of the card.
   */
  date?: string;
}

const InfoCardWithDate = (props: InfoCardWithDateProps) => {
  const { title, data, dateDescription, date } = props;
  const classes = createClasses();

  return (
    <Card className={classes.root}>
      <Typography component="h3" variant="h4" color="primary">
        {title}
      </Typography>
      <Grid container direction="column" alignItems="center" className={classes.content}>
        <Typography component="span" variant="h2" className={classes.data}>
          {data}
        </Typography>
        <Typography component="span" className={classes.dateDescription}>
          {dateDescription}
        </Typography>
        <Typography component="span" className={classes.date}>
          {date}
        </Typography>
      </Grid>
    </Card>
  );
};

InfoCardWithDate.defaultProps = {
  title: '-',
  data: '-',
  dateDescription: '-',
  date: '-'
};

const m = memo(InfoCardWithDate);
export { m as InfoCardWithDate };