import React from 'react';
import PropTypes from 'prop-types';
import TableBasic from 'src/components/shared/table-basic';
import type { GetStatementPeriodsQuery } from 'src/apollo/queries/statement-periods/__generated__/statement-periods';

type UpcomingStatementPeriod = NonNullable<
    GetStatementPeriodsQuery['abacusStatementPeriods']
>['upcomingPeriods'][0];

interface UpcomingStatementPeriodsProps {
    upcomingPeriods: UpcomingStatementPeriod[];
}

const UpcomingStatementPeriods: React.FC<UpcomingStatementPeriodsProps> = ({
    upcomingPeriods,
}) => {
    const headers = ['Statement period', 'Period ID'];

    const formattedPeriods = () =>
        upcomingPeriods.map(period => ({
            id: period?.statementPeriodId,
            cols: [period?.statementPeriodName, period?.statementPeriodId],
        }));

    return (
        <div className="StatementPeriods">
            <h3>Upcoming</h3>
            <TableBasic headers={headers} rows={formattedPeriods()} />
        </div>
    );
};

UpcomingStatementPeriods.propTypes = {
    upcomingPeriods: PropTypes.array.isRequired,
};

export default UpcomingStatementPeriods;