<template>
    <div class="h-64">
        <Bar
            v-if="hasData"
            :data="chartData"
            :options="options"
        />
        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
            {{ emptyMessage ?? $t('reporting.empty') }}
        </p>
    </div>
</template>

<script setup lang="ts">
import { Bar } from 'vue-chartjs'

const props = defineProps<{
    labels: string[]
    values: number[]
    color?: string
    emptyMessage?: string
}>()

const hasData = computed(() => props.values.some(v => v > 0))

const chartData = computed(() => ({
    labels: props.labels,
    datasets: [{
        data: props.values,
        backgroundColor: props.color ?? '#6366f1',
        borderWidth: 0,
        borderRadius: 6,
    }],
}))

const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: { display: false },
    },
    scales: {
        y: {
            beginAtZero: true,
            grid: { color: '#f3f4f6' },
        },
        x: {
            grid: { display: false },
        },
    },
}
</script>
