import React from 'react';
import {GroupReport} from "../../../models/Riview/InstituteReports";
import ListRow from "../../UI/DuaList/ListRow";
import TextColumn from "../../UI/DuaList/Columns/TextColumn";
import {forceUppercase} from "../../../helpers/functions";
import DownloadColumn from "../../UI/DuaList/Columns/DownloadColumn";
import DuaList from "../../UI/DuaList/DuaList";

type ReportsListProps = {
    reports: GroupReport[]
}

const ReportsList = ({reports}: ReportsListProps) => {


    return (
        <>
            {
                reports &&
                    <DuaList>

                        {
                            reports?.map(r => {
                                return (
                                    <ListRow
                                        _key={r.acronym}
                                        key={r.acronym}>

                                        <TextColumn
                                            label={'ΑΚΡΩΝΥΜΟ'}
                                            align={'left'}
                                            size={'14px'}
                                            flex={'0 0 190px'}

                                        >
                                            <b>
                                                {r.acronym}
                                            </b>
                                        </TextColumn>
                                        <TextColumn
                                            label={'ΟΝΟΜΑ'}
                                            align={'left'}
                                            size={'11px'}
                                            flex={'1 0 0'}

                                        >
                                            <b>
                                                {forceUppercase(r.name)}
                                            </b>
                                        </TextColumn>

                                        <DownloadColumn

                                            flex={'0 0 220px'} path={r.report}>
                                            Download {r.acronym} Report
                                        </DownloadColumn>

                                        <DownloadColumn
                                            flex={'0 0 220px'} path={r.evaluation_report}>
                                            Download {r.acronym} Evaluation
                                        </DownloadColumn>

                                    </ListRow>
                                );
                            })}
                    </DuaList>

            }
        </>
    );
}

export default ReportsList;