"use client";
import type { ChartBlock } from "@/types/page";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";

export default function ChartBlockView({ title, series }: ChartBlock) {
    return (
        <div className="w-full h-80 rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
            <div className="mb-4 font-medium text-lg text-gray-900 dark:text-gray-100">{title}</div>
            <ResponsiveContainer width="100%" height="100%">
                <LineChart data={series}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                    <XAxis
                        dataKey="x"
                        stroke="#6b7280"
                        tick={{ fill: '#6b7280' }}
                    />
                    <YAxis
                        stroke="#6b7280"
                        tick={{ fill: '#6b7280' }}
                    />
                    <Tooltip
                        contentStyle={{
                            backgroundColor: '#1f2937',
                            border: 'none',
                            borderRadius: '8px',
                            color: '#f9fafb'
                        }}
                    />
                    <Line
                        type="monotone"
                        dataKey="y"
                        stroke="#3b82f6"
                        strokeWidth={2}
                        dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }}
                        activeDot={{ r: 6, stroke: '#3b82f6', strokeWidth: 2 }}
                    />
                </LineChart>
            </ResponsiveContainer>
        </div>
    );
}