import type { LucideIcon } from "lucide-react";
import { TrendingDown, TrendingUp } from "lucide-react";

export default function StatTile({
  icon: Icon,
  label,
  value,
  accent,
  deltaPct,
}: {
  icon: LucideIcon;
  label: string;
  value: number;
  accent: string;
  /** % change vs the previous equal period; omit if there's no baseline yet. */
  deltaPct?: number | null;
}) {
  const hasDelta = typeof deltaPct === "number" && Number.isFinite(deltaPct);
  const isUp = hasDelta && (deltaPct as number) >= 0;

  return (
    <div className="rounded-2xl border border-black/10 bg-white p-5">
      <div className="mb-3 flex items-center justify-between">
        <div className={`flex h-9 w-9 items-center justify-center rounded-lg bg-black/5 ${accent}`}>
          <Icon size={18} />
        </div>
        {hasDelta && (
          <span
            className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold ${
              isUp ? "bg-emerald-50 text-emerald-700" : "bg-red-50 text-red-600"
            }`}
          >
            {isUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
            {Math.abs(deltaPct as number).toFixed(0)}%
          </span>
        )}
      </div>
      <p className="text-2xl font-bold tabular-nums text-[#1A1A1A]">{value.toLocaleString("ar")}</p>
      <p className="mt-1 text-xs text-[#8A8A8A]">{label}</p>
      {hasDelta && <p className="mt-0.5 text-[10px] text-[#B0B0B0]">مقارنة بالأسبوع السابق</p>}
    </div>
  );
}