knur-app/components/running-stats-chart.tsx

"use client";

import { useEffect, useState } from "react";
import {
  Area,
  AreaChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

type RunDataPoint = {
  label: string;
  distanceKm: number;
};

type Props = {
  data: RunDataPoint[];
};

export function RunningStatsChart({ data }: Props) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) {
    return (
      <div className="w-full rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4">
        <div className="mb-2 h-4 w-56 animate-pulse rounded bg-white/10" />
        <div className="h-[220px] animate-pulse rounded bg-white/5" />
      </div>
    );
  }

  return (
    <div className="w-full rounded-2xl border border-white/10 bg-surface/55 shadow-lg shadow-black/10 backdrop-blur-md p-4">
      <div className="mb-2 text-sm text-fg/60">Tygodniowy dystans biegowy (od poniedziałku)</div>
      <ResponsiveContainer width="100%" height={220}>
        <AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="distGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.3} />
              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
            </linearGradient>
          </defs>
          <XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={11} />
          <YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={11} width={40} />
          <Tooltip
            cursor={{ stroke: "var(--color-accent)", strokeWidth: 1 }}
            contentStyle={{
              background: "color-mix(in oklab, var(--color-surface) 92%, transparent)",
              border: "1px solid rgba(255,255,255,0.12)",
              borderRadius: 12,
              fontSize: 12,
              color: "var(--color-fg)",
            }}
            formatter={(value) => [`${Number(value).toFixed(2)} km`, "Dystans"]}
          />
          <Area
            type="monotone"
            dataKey="distanceKm"
            stroke="var(--color-accent)"
            fill="url(#distGradient)"
            strokeWidth={2}
            name="distanceKm"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}