import ReactECharts from 'echarts-for-react';

import { VizBarChartType } from '@/api/types';

import VizChartEmpty from './VizChartEmpty';

const VizBarChartItem = ({ items }: { items: VizBarChartType[] }) => {

    if (items.length == 0) {
        return <VizChartEmpty />
    }

    return (
        <div>
            <ReactECharts
                style={{
                    height: 230,
                }}

                option={{
                    darkMode: false ? true : false,




                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '5%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'category',
                        data: items.map((item) => item.label),
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            data: items.map((item) => item.value) ?? [],
                            type: 'bar',
                            smooth: true,
                        },
                    ],
                }}


            />

        </div>
    )
}

export default VizBarChartItem;