import Image from "next/image";
import { TrendDownIcon, TrendUpIcon } from "./icons";

export type StatsCardProps = {
  title: string;
  value: string | number;
  change: string;
  isPositive: boolean;
  icon: "sellers" | "newProducts" | "usedProducts" | "quotes" | "offers";
  loading?: boolean;
};

const iconMap: Record<StatsCardProps["icon"], string> = {
  sellers: "/assets/topsellers.png",
  newProducts: "/assets/newproducts.png",
  usedProducts: "/assets/newproducts.png",
  quotes: "/assets/pendingquotes.png",
  offers: "/assets/pendingoffers.png",
};

export default function StatsCard({
  title,
  value,
  change,
  isPositive,
  icon,
  loading = false,
}: StatsCardProps) {
  return (
    <div className="min-w-0 rounded-xl border border-[#E4E7EC] bg-white p-4">
      <p className="text-[12px] font-medium text-[#667085]">{title}</p>

      <div className="mt-2.5 flex items-center gap-3">
        <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#EAF1FF]">
          <Image src={iconMap[icon]} alt="" width={20} height={20} />
        </div>
        {loading ? (
          <div className="h-7 w-16 animate-pulse rounded bg-[#E4E7EC]" />
        ) : (
          <h2 className="text-[22px] font-bold text-[#101828]">{value}</h2>
        )}
      </div>

      <div className="mt-3 flex items-center justify-between">
        {loading ? (
          <div className="h-4 w-28 animate-pulse rounded bg-[#E4E7EC]" />
        ) : (
          <>
            <p className={`text-[12px] font-medium ${isPositive ? "text-[#16A34A]" : "text-[#DC2626]"}`}>
              {change}
            </p>
            <span className={isPositive ? "text-[#16A34A]" : "text-[#DC2626]"}>
              {isPositive ? <TrendUpIcon /> : <TrendDownIcon />}
            </span>
          </>
        )}
      </div>
    </div>
  );
}