import { cn } from "@/lib/utils";
import type { ComponentType } from "react";

interface StatCardProps {
  title: string;
  value: string;
  /** Optional secondary line shown under the value. */
  subLabel?: string;
  change?: string;
  changeType?: "positive" | "negative" | "neutral";
  icon?: ComponentType<{ className?: string }>;
  className?: string;
}

export function StatCard({
  title,
  value,
  subLabel,
  change,
  changeType = "neutral",
  icon: Icon,
  className,
}: StatCardProps) {
  const changeColor = {
    positive: "text-green-600 dark:text-green-400",
    negative: "text-red-600 dark:text-red-400",
    neutral: "text-muted-foreground",
  }[changeType];

  const changeBg = {
    positive: "bg-green-100/20 dark:bg-green-900/15",
    negative: "bg-red-100/20 dark:bg-red-900/15",
    neutral: "bg-muted/20",
  }[changeType];

  return (
    <div
      className={cn(
        "rounded-lg border bg-card p-5 transition-shadow hover:shadow-md",
        className,
      )}
    >
      <div className="flex items-center justify-between pb-2">
        <p className="text-sm font-medium text-muted-foreground">{title}</p>
        {Icon && <Icon className="h-4 w-4 text-muted-foreground/60" />}
      </div>
      <div className="space-y-1.5">
        <p className="text-2xl font-bold tracking-tight">{value}</p>
        {change && (
          <div className="flex items-center gap-1.5 text-xs">
            <span
              className={cn(
                "inline-flex items-center rounded-full px-1.5 py-0.5 font-medium",
                changeBg,
                changeColor,
              )}
            >
              {change}
            </span>
            {subLabel && (
              <span className="text-muted-foreground">{subLabel}</span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}