import React from "react";
import PropTypes from "prop-types";
import { Grid, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";

const ReleaseNoteSummary = ({ releaseNote, collapsed }) => {
  const { t } = useTranslation();

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

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

export default ReleaseNoteSummary;
