import * as React from "react";
import { TrendingDown, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";

function useCountUp(target: number, duration = 900) {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    let frame = 0;
    const start = performance.now();

    function tick(now: number) {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setValue(Math.round(target * eased));
      if (progress < 1) frame = requestAnimationFrame(tick);
    }

    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [target, duration]);

  return value;
}

export interface Stat {
  label: string;
  value: number;
  delta: number;
  prefix?: string;
  suffix?: string;
  bars?: number[];
}

function StatCard({ stat }: { stat: Stat }) {
  const value = useCountUp(stat.value);
  const positive = stat.delta >= 0;
  const bars = stat.bars ?? [40, 65, 45, 80, 60, 95, 75];
  const max = Math.max(...bars);

  return (
    <div className="rounded-xl border bg-card p-5">
      <p className="text-xs font-medium text-muted-foreground">{stat.label}</p>

      <div className="mt-2 flex items-end justify-between gap-3">
        <span className="text-2xl font-semibold tabular-nums">
          {(stat.prefix ?? "") + value.toLocaleString() + (stat.suffix ?? "")}
        </span>
        <span
          className={cn(
            "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium",
            positive
              ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
              : "bg-red-500/10 text-red-600 dark:text-red-400"
          )}
        >
          {positive ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
          {Math.abs(stat.delta)}%
        </span>
      </div>

      <div className="mt-4 flex h-8 items-end gap-1">
        {bars.map((bar, index) => (
          <div
            key={index}
            className="flex-1 rounded-sm bg-foreground/10 transition-all duration-500 hover:bg-foreground/25"
            style={{ height: (bar / max) * 100 + "%" }}
          />
        ))}
      </div>
    </div>
  );
}

export function StatCards({ stats, className }: { stats: Stat[]; className?: string }) {
  return (
    <div className={cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-3", className)}>
      {stats.map((stat) => (
        <StatCard key={stat.label} stat={stat} />
      ))}
    </div>
  );
}

Related components