import { Typography } from "antd";
import React from "react";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectDates } from "../../../redux/reporting/reporting.selectors";
import dayjs from '../../../util/day.js';

import { DateFormat } from "../../../util/constants";
const mapStateToProps = createStructuredSelector({
  dates: selectDates,
});

export function ReportingTitleAtom({ dates }) {
  return (
    <Typography.Title level={2}>
      {`RPS Report for Period from ${dayjs(dates.startDate).format(
        DateFormat
      )} to ${dayjs(dates.endDate).format(DateFormat)}`}
    </Typography.Title>
  );
}
export default connect(mapStateToProps, null)(ReportingTitleAtom);
