'use client'

import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ResponsiveContainer } from 'recharts'
import type { DayTokenRow } from '@/lib/insights/token-history'

interface Props {
  data: DayTokenRow[]
}

export function TokenDayChart({ data }: Props) {
  if (data.length === 0) {
    return <p className="text-muted-foreground">Geen dag-data beschikbaar</p>
  }

  return (
    <ResponsiveContainer width="100%" height={280}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
        <XAxis dataKey="day" tick={{ fontSize: 11 }} tickFormatter={v => (v as string).slice(5).replace('-', '/')} />
        <YAxis tick={{ fontSize: 11 }} tickFormatter={v => `$${(v as number).toFixed(3)}`} />
        <Tooltip formatter={(v: unknown) => [`$${Number(v).toFixed(4)}`, 'Kosten']} />
        <Line
          type="monotone"
          dataKey="totalCostUsd"
          stroke="var(--color-primary)"
          strokeWidth={2}
          dot={false}
          name="Kosten (USD)"
        />
      </LineChart>
    </ResponsiveContainer>
  )
}