"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  LineChart, 
  Line, 
  XAxis, 
  YAxis, 
  CartesianGrid, 
  Tooltip, 
  ResponsiveContainer 
} from "recharts";

interface UsageChartProps {
  data: Array<{
    date: string;
    conversations: number;
    tokens: number;
  }>;
}

export function UsageChart({ data }: UsageChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base font-medium">Usage quotidien</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
            <XAxis 
              dataKey="date" 
              className="text-xs fill-muted-foreground"
              tickFormatter={(value) => new Date(value).toLocaleDateString('fr-FR', { 
                month: 'short', 
                day: 'numeric' 
              })}
            />
            <YAxis className="text-xs fill-muted-foreground" />
            <Tooltip 
              contentStyle={{
                backgroundColor: 'hsl(var(--background))',
                border: '1px solid hsl(var(--border))',
                borderRadius: '8px',
              }}
              labelFormatter={(value) => new Date(value).toLocaleDateString('fr-FR')}
              formatter={(value: number, name: string) => {
                if (name === 'tokens') {
                  return [Math.round(value / 1000), "Tokens (k)"];
                }
                return [value, name];
              }}
            />
            <Line 
              type="monotone" 
              dataKey="conversations" 
              stroke="hsl(var(--primary))" 
              strokeWidth={2}
              name="Conversations"
            />
            <Line 
              type="monotone" 
              dataKey="tokens" 
              stroke="hsl(var(--destructive))" 
              strokeWidth={2}
              name="tokens"
            />
          </LineChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}