'use client'

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts'
import type { BurndownSprint } from '@/lib/insights/burndown'

interface Props {
  sprint: BurndownSprint
}

export function BurndownChart({ sprint }: Props) {
  if (sprint.days.length === 0) {
    return <p className="text-muted-foreground text-sm">Geen sprint-data</p>
  }

  return (
    <div className="space-y-2">
      <h3 className="text-sm font-medium text-foreground">
        {sprint.productName} — {sprint.sprintGoal}
      </h3>
      <ResponsiveContainer width="100%" height={240}>
        <LineChart data={sprint.days}>
          <XAxis dataKey="day" tick={{ fontSize: 11 }} />
          <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
          <Tooltip />
          <Legend />
          <Line
            dataKey="ideal"
            stroke="var(--muted-foreground)"
            strokeDasharray="4 4"
            dot={false}
          />
          <Line
            dataKey="remaining"
            stroke="var(--status-in-progress)"
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}
