<script setup lang="ts">
import { computed } from 'vue';
import { Line } from 'vue-chartjs';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Tooltip,
    Legend,
    Filler,
} from 'chart.js';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Tooltip,
    Legend,
    Filler,
);

export interface PricePoint {
    label: string;
    value: number;
}

const props = defineProps<{
    data: PricePoint[];
}>();

const chartData = computed(() => ({
    labels: props.data.map((d) => d.label),
    datasets: [
        {
            data: props.data.map((d) => d.value),
            borderColor: '#4ba66a',
            backgroundColor: 'rgba(75, 166, 106, 0.1)',
            fill: true,
            tension: 0.4,
            pointRadius: 2,
        },
    ],
}));

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false,
        },
    },
};
</script>

<template>
    <div class="flex h-64 flex-1">
        <Line :data="chartData" :options="chartOptions" />
    </div>
</template>
