import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import styles from "../../../components/common/styles/gridStyles";

const useStyles = makeStyles(styles);

const ReleaseNotesSummary = ({ releaseNote, collapsed }) => {
  const classes = useStyles();
  const { t } = useTranslation();

  return (
    <Grid container className={classes.miniContainer}>
      <Grid item xs={6} sm={2} md={2}>
        <Typography variant={collapsed ? "subtitle2" : "h6"}>
          {`${t("ReleaseNotes.Version")}: ${releaseNote.version}`}
        </Typography>
      </Grid>
      <Grid item xs={6} sm={2} md={collapsed ? 2 : 4}>
        <Typography variant={collapsed ? "subtitle2" : "h6"}>
          {`${t("ReleaseNotes.Date")}: ${t("DATE_FORMAT", {
            date: { value: releaseNote.date, format: "DD-MM-YYYY HH:mm" }
          })}`}
        </Typography>
      </Grid>
      {collapsed && (
        <Grid item xs={12} sm={8} md={8}>
          <Typography variant="body2">{releaseNote.notes[0]}</Typography>
        </Grid>
      )}
    </Grid>
  );
};

ReleaseNotesSummary.propTypes = {
  releaseNote: PropTypes.object.isRequired,
  collapsed: PropTypes.bool.isRequired
};

export default ReleaseNotesSummary;