import React from 'react';
import {ChartData} from "../../../../models/Riview/ChartData";
import {getRate} from "../../../../helpers/functions";
import RateBox from "../../../ApexCharts/RateBox";
import './genderbox.scss'

type GenderBoxProps = {
    males: ChartData
    females: ChartData
}


const GenderBox = ({males, females}: GenderBoxProps) => {


    const lastYear = males.labels[3]
    const lastValueMale = males.series[0].data[3]
    const lastValueFemale = females.series[0].data[3]
    const maleRate = getRate(males.series[0].data)
    const femaleRate = getRate(females.series[0].data)

    return (
        <div className='gender-box'>
            <div>
                <span className='label'>Females</span>
                <span className='value'>{lastValueFemale}</span>
                <span className='year'>το {lastYear}</span>
                <RateBox rate={femaleRate}/>
            </div>
            <div>
                <span className='label'>Males</span>
                <span className='value'>{lastValueMale}</span>
                <span className='year'>το {lastYear}</span>
                <RateBox rate={maleRate}/>
            </div>
        </div>
    );
}

export default GenderBox;