<template>
    <div class="w-full relative" style="aspect-ratio: 2/1">
        <canvas id="chart" :aria-label="title"></canvas>
    </div>
</template>
<script setup>
import { Chart } from 'chart.js/auto';
const colorMode = useColorMode()

const props = defineProps({
    type: {
        type: String,
        default: 'line'
    },
    title: {
        type: String,
        default: ''
    },
    labels: {
        type: Array,
        default: () => []
    },
    data: {
        type: Array,
        default: () => []
    }
})
let chart
onMounted(() => {
    chart = new Chart(document.getElementById('chart'), {
        type: props.type,
        data: {
            labels: props.labels,
            datasets: props.data
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: props.title,
                }
            }
        }
    })
})
watch(()=> colorMode.value, (value) => {
    let color = '#e5e7eb'
    if (value === 'dark') color = '#1f2937'
    Chart.defaults.borderColor = color
}, { immediate: true, deep: true })
</script>
