"use client";

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

export default function TrendChart({ data }: { data: { month: string; applications: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={260}>
      <LineChart data={data} margin={{ top: 10, right: 12, left: -16, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#EAE3D2" vertical={false} />
        <XAxis dataKey="month" tick={{ fontSize: 12, fill: "#6B6B66" }} axisLine={false} tickLine={false} />
        <YAxis allowDecimals={false} tick={{ fontSize: 12, fill: "#6B6B66" }} axisLine={false} tickLine={false} />
        <Tooltip
          contentStyle={{ borderRadius: 12, border: "1px solid #EAE3D2", fontSize: 13 }}
          labelStyle={{ color: "#1A1A1A", fontWeight: 600 }}
        />
        <Line
          type="monotone"
          dataKey="applications"
          stroke="#0F6E56"
          strokeWidth={2.5}
          dot={{ r: 3, fill: "#0F6E56" }}
          activeDot={{ r: 5 }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}