Untitled

import React from 'react';
import { Button, Label, Column, Header, Row, Para } from '@d-lift/uxcomponents';
import { Util } from '@d-lift/core';

const RFIDetails = ({ rfi, responseStats, updatedDueDt }) => {
    const renderMultipleValues = (values, refTableName) => {
        return values.split(',').map((value) => (
            <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal" key={value}>
                {Util.getRefTableDescriptionByCode(refTableName, value)}
            </Para>
        ));
    };

    return (
        <>
            <div className="ux-rfi-grey-border w-100 mt-3">
                <Header className="pt-3 ux-rfi-font-header" size="2">
                    {rfi.title}
                </Header>
                <Row>
                    <Column className="col-9">
                        <Row className="d-flex flex-wrap">
                            <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label">
                                {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)}
                            </Para>

                            {/* Handle this for multiple categories */}
                            {renderMultipleValues(rfi.category, 'CATEGORY')}

                            {/* Handle this for multiple programs */}
                            {renderMultipleValues(rfi.programs, 'PROGRAM')}
                        </Row>
                    </Column>

                    <Column>
                        <div className="ux-rfi-grey-border">
                            <Label
                                labelKey="requested_by"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">
                                {Util.getRefTableDescriptionByCode('STATE', rfi.state)}
                            </Para>
                            <Label
                                labelKey="due"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{updatedDueDt}</Para>
                            <Label
                                labelKey="responses"
                                className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label>
                            <Para className="ux-rfi-bold">{responseStats}</Para>
                            <div className="m-0 p-1">
                                <Button
                                    id="summarizeBtn"
                                    size="small"
                                    className="ux-rfi-green-button"
                                    // click={}
                                    labelKey="summarize_btn"></Button>
                            </div>
                        </div>
                    </Column>
                </Row>
            </div>

            <div className="ux-rfi-grey-border w-100 mt-3">
                <Para className="mt-2 scrollable-content">
                    {rfi.description ? (
                        rfi.description
                    ) : (
                        <h4 className="text-muted">Description Not available!!</h4>
                    )}
                </Para>
            </div>
        </>
    );
};

export default RFIDetails;