'use client'

import { Line } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  ChartOptions,
} from "chart.js"

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

export default function GraphiqueEvolution() {
  const labels = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin"]
  const dataValues = [50, 120, 80, 150, 100, 200]

  const data = {
    labels,
    datasets: [
      {
        label: "Nouveaux inscrits",
        data: dataValues,
        borderColor: "#1978e5",
        backgroundColor: "rgba(25, 120, 229, 0.2)",
        tension: 0.4,
        fill: true,
        pointRadius: 5,
        pointHoverRadius: 7,
      },
    ],
  }

  const options: ChartOptions<'line'> = {
    responsive: true,
    animation: {
      duration: 2000,
      easing: "easeInOutCubic",
    },
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
      tooltip: {
        enabled: true,
        mode: "index",
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          stepSize: 50,
        },
      },
    },
  }

  return (
    <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm">
      <h3 className="font-bold mb-6 text-slate-800 dark:text-slate-200">
        Évolution des Inscriptions
      </h3>
      <Line data={data} options={options} />
    </div>
  )
}