"use client";

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

const NETWORK_COLORS: Record<string, string> = {
  LinkedIn: "#0A66C2",
  Twitter: "#1DA1F2",
  Facebook: "#1877F2",
  Instagram: "#E4405F",
};

interface NetworkLineChartProps {
  data: Array<Record<string, string | number>>;
  title: string;
  networks: string[];
}

export function NetworkLineChart({ data, title, networks }: NetworkLineChartProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div role="img" aria-label={`${title} - line chart comparing metrics across ${networks.join(", ")}`}>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
            <XAxis dataKey="date" className="text-xs" />
            <YAxis className="text-xs" />
            <Tooltip />
            <Legend />
            {networks.map((network) => (
              <Line
                key={network}
                type="monotone"
                dataKey={network}
                stroke={NETWORK_COLORS[network] || "#8884d8"}
                strokeWidth={2}
                dot={false}
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  );
}