'use client';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export default function ClickChart({chartData }: {chartData: any[]}) {
    return (
        <div className="h-75 w-full bg-wtihub-surface p-6 rounded-2xl border border-wihub-border shadow-inner overflow-hidden flex flex-col">
            <h3 className="text-sm font-bold text-gray-500 uppercase tracking-widest mb-6">Interaction Velocity</h3>
            <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#30363D" vertical={false} />
                    <XAxis 
                      dataKey="name"
                      stroke="#484f58"
                      fontSize={12}
                      tickLine={false}
                      axisLine={false}
                    />
                    <YAxis
                      stroke="#484f58"
                      fontSize={12}
                      tickLine={false}
                      axisLine={false}
                    />
                    <Tooltip 
                       contentStyle={{backgroundColor: '#161B22', border: '1px solid #30363D', borderRadius: '8px'}}
                       itemStyle={{color: '#00CB96'}}
                     />
                     <Line 
                       type="monotone"
                       dataKey="clicks"
                       stroke="#00C896"
                       strokeWidth={3}
                       dot={{r: 4, fill: '#00C806', strokeWidth: 2}}
                       activeDot={{ r: 6, strokeWidth: 0}}
                     />
                </LineChart>
            </ResponsiveContainer>
        </div>
    )
}