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

export const PriceChart = () => {
  // Mock data - will be replaced with real price history
  const data = [
    { date: "Jan 1", samsung: 1499, wd: 1499, crucial: 599 },
    { date: "Jan 3", samsung: 1449, wd: 1450, crucial: 579 },
    { date: "Jan 5", samsung: 1399, wd: 1450, crucial: 569 },
    { date: "Jan 7", samsung: 1349, wd: 1399, crucial: 549 },
    { date: "Jan 9", samsung: 1299, wd: 1450, crucial: 549 },
  ];

  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-card border border-border rounded-lg p-3 shadow-lg">
          <p className="text-sm font-medium mb-2">{label}</p>
          {payload.map((entry: any, index: number) => (
            <p key={index} className="text-sm" style={{ color: entry.color }}>
              {entry.name}: {entry.value} DKK
            </p>
          ))}
        </div>
      );
    }
    return null;
  };

  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
        <XAxis 
          dataKey="date" 
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
        />
        <YAxis 
          stroke="hsl(var(--muted-foreground))"
          fontSize={12}
        />
        <Tooltip content={<CustomTooltip />} />
        <Legend 
          wrapperStyle={{ fontSize: '12px' }}
        />
        <Line 
          type="monotone" 
          dataKey="samsung" 
          stroke="hsl(var(--chart-1))" 
          name="Samsung 990 PRO"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--chart-1))" }}
        />
        <Line 
          type="monotone" 
          dataKey="wd" 
          stroke="hsl(var(--chart-2))" 
          name="WD Black SN850X"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--chart-2))" }}
        />
        <Line 
          type="monotone" 
          dataKey="crucial" 
          stroke="hsl(var(--chart-3))" 
          name="Crucial P5 Plus"
          strokeWidth={2}
          dot={{ fill: "hsl(var(--chart-3))" }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
};