import React from 'react';
import arrowBlue from "../../../../assets/images/down_arrow_blue.png";
import {ChartData} from "../../../../models/Riview/ChartData";

interface RescomTextBoxProps {
    data: ChartData
    icon: string
    arrow: string
}

const RescomTextBox = (props : RescomTextBoxProps) => {

    return (
        <div className="rescom-box-container alternative-box">
                        <div className="rescom-alternative-box-title">
                            <img src={props.icon} alt="συμβάσεις ανά ηλικία" className="rescom-box-title-link-img" />
                            <p className="rescom-alternative-box-title-text">{props.data.title}</p>
                        </div>
                        <div className="filters-container">

                        {
                            Array(props.data.labels.length).fill(null).map((_,i) => {
                                return (
                                    <div key={i} className="filter-box">
                                        <div className="filter-box-left">
                                            <p className="filter-number">{props.data.series[0].data[i]}</p>
                                            <p className="filter-p">
                                                {props.data.labels[i] === 'Άντρας' ? props.data.labels[i].replace('Άντρας', 'Άνδρες')
                                                : props.data.labels[i] === 'Γυναίκα' ? props.data.labels[i].replace('Γυναίκα', 'Γυναίκες')
                                                : props.data.labels[i]}
                                            </p>
                                        </div>
                                        {/*<<<<-------εδω θελουμε link? ηταν a  και το εκανα div.  υπαρχει και αντιστοιχο style για τον κερσορα στην css commented out---->>>>*/}
                                        {/*<img src={arrowBlue} alt="arrow left" className="rescom-box-arrow" />*/}
                                    </div>
                                )
                            })
                        }
                        </div>
                </div>
    );
}

export default RescomTextBox;