const RepresentationTimetablePanel = ({
    t,
    appealIsConsultation,
    appealIsLocalImpact,
    renderDueDate,
    renderStatementsDue,
    renderMarineImpact,
    renderConsultationClose,
    renderFinalCommentsDue,
    isQuestionnaire,
    whichProgress
}) => {
    return (
        <div className="govuk-grid-column-one-quarter">
            <div className="card">
                <div className="card-body">
                    <h2 className="govuk-heading-s">
                        {t("myrepresentations:timetable-title")}
                    </h2>
                    <div className="govuk-summary-list">
                        <div className="govuk-body-s">
                            {appealIsLocalImpact
                                ? t("myrepresentations:local-impact-report")
                                : t(
                                      "myrepresentations:questionnaire-due-label"
                                  )}
                            :{" "}
                            <span className="govuk-body-s">
                                {renderDueDate()}
                            </span>
                        </div>

                        {!appealIsConsultation && renderStatementsDue()}

                        {renderMarineImpact()}

                        {renderConsultationClose()}

                        {renderFinalCommentsDue()}
                    </div>
                </div>
            </div>

            {isQuestionnaire && whichProgress()}
        </div>
    );
};

export default RepresentationTimetablePanel;