import React from 'react';
import './sentiment-data.scss';


const SentimentData = (props: any) => {
    const Items = [
        {
            label: "Very Positive",
            value: 2,
            color: "#3ADAB7"
        },
        {
            label: "Positive",
            value: 1,
            color: "#C4F3E9"
        },
        {
            label: "Neutral",
            value: 0,
            color: "#44C8F5"
        },
        {
            label: "Negative",
            value: -1,
            color: "#FF9900"
        },
        {
            label: "Very Negative",
            value: -2,
            color: "#FF5D60"
        },
    ];

    const selectedItem = Items.find(item => item.value === parseInt(props.value));
    <div>{props.value}</div>

    if (!selectedItem) {
        return <div>{props.value}</div>;
    }

    return (
        <div className='sentiment-data-container'>
            <span className='sentiment-alignment' style={{ backgroundColor: selectedItem.color}}></span>
            <span className='label-alignment'>{selectedItem.label}</span>
        </div>
    );
}

export default SentimentData;