import React from 'react';
import {ChartData} from "../../../../models/Riview/ChartData";
import BarChartColumn from "../../../ApexCharts/BarChartColumn/BarChartColumn";
import BarChartHorizontal from "../../../ApexCharts/BarChartHorizontal/BarChartHorizontal";
import './rescom-bar-box.scss'

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

const RescomBarBox = (props : RescomBarBoxProps) => {

    return (
        <div className="rescom-box-container">
            <div className="rescom-box">
                {/*<<<<-------εδω θελουμε link? ηταν a  και το εκανα div.  υπαρχει και αντιστοιχο style για τον κερσορα στην css commented out---->>>>*/}
                <div className="rescom-box-title-link">
                    <img src={props.icon} alt="συμβάσεις ανά ηλικία" className="rescom-box-title-link-img" />
                    <p className="rescom-box-title-link-text">{props.data.title}</p>
                    {/* <img src={arrowBlue} alt="arrow left" className="rescom-box-arrow" /> */}
                </div>
                <div className="rescom-bar-chart-container">   

                {
                    props.data.type == "barHorizontal" ? 
                    <BarChartHorizontal chart={props.data}></BarChartHorizontal>
                     : 
                    
                    <BarChartColumn chart={props.data}></BarChartColumn>
                                               
                }           
                </div>
            </div>
        </div>
    );
}

export default RescomBarBox;