AI Analytics Card

"use client";
import React from "react";
import { TrendingUp, TrendingDown } from "lucide-react";

interface Props { title: string; value: string; change: number; sparkline?: number[]; }

export default function AIAnalyticsCard({ title, value, change, sparkline = [20, 45, 28, 80, 55, 90, 72] }: Props) {
  const isPositive = change >= 0;
  const max = Math.max(...sparkline);
  const min = Math.min(...sparkline);
  return (
    <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5">
      <p className="text-sm text-zinc-500 mb-1">{title}</p>
      <div className="flex items-end justify-between mb-3">
        <p className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 tracking-tight">{value}</p>
        <div className={`flex items-center gap-1 text-xs font-medium ${isPositive ? "text-emerald-500" : "text-red-500"}`}>
          {isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
          {Math.abs(change)}%
        </div>
      </div>
      <div className="flex items-end gap-1 h-10">
        {sparkline.map((val, i) => (
          <div key={i} className={`flex-1 rounded-sm ${isPositive ? "bg-emerald-500/20" : "bg-red-500/20"}`} style={{ height: `${((val - min) / (max - min)) * 100}%`, minHeight: "4px" }} />
        ))}
      </div>
    </div>
  );
}