<template>
    <div class="chart-container">
        <canvas :id="chartId"></canvas>
    </div>
</template>

<script>
import Chart from 'chart.js';

export default {
    props: ['chartId', 'labels', 'datasets', 'type'],
    mounted() {
        this.renderChart();
    },
    methods: {
        renderChart() {
            new Chart(document.getElementById(this.chartId), {
                type: this.type || 'bar',
                data: {
                    labels: this.labels,
                    datasets: this.datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontColor: '#495057'
                            },
                            gridLines: {
                                color: '#e9ecef'
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontColor: '#495057'
                            },
                            gridLines: {
                                color: '#e9ecef'
                            }
                        }]
                    },
                    legend: {
                        labels: {
                            fontColor: '#007bff'
                        }
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: '#007bff',
                        titleFontColor: '#fff',
                        bodyFontColor: '#fff',
                        footerFontColor: '#fff',
                        footerFontSize: 14,
                        footerAlign: 'center',
                        callbacks: {
                            title: function(tooltipItems, data) {
                                return 'Date: ' + data.labels[tooltipItems[0].index];
                            },
                            label: function(tooltipItem, data) {
                                return 'Value: ' + tooltipItem.yLabel;
                            },
                            footer: function(tooltipItems, data) {
                                return 'Timestamp: ' + new Date().toLocaleString();
                            }
                        }
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 20px auto;
}
</style>
