import { cn } from "@/lib/utils";

type MetricCardSize = "default" | "compact" | "inline";

type MetricCardProps = {
  label: string;
  value: string;
  delta?: string;
  positive?: boolean;
  className?: string;
  size?: MetricCardSize;
};

export function MetricCard({
  label,
  value,
  delta,
  positive = true,
  className,
  size = "default",
}: MetricCardProps) {
  if (size === "inline") {
    return (
      <div className={cn("index-card", className)}>
        <p className="label">{label}</p>
        <p className="value">{value}</p>
        {delta ? (
          <p className={cn("delta", positive ? "positive" : "negative")}>
            {delta}
          </p>
        ) : null}
      </div>
    );
  }

  if (size === "compact") {
    return (
      <div
        className={cn(
          "min-w-0 border-t border-[color:var(--line-weak)] pt-2",
          className,
        )}
      >
        <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
          {label}
        </p>
        <p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
          {value}
        </p>
        {delta ? (
          <p
            className={cn(
              "mt-1 text-[10px]",
              positive ? "text-[#96f5bf]" : "text-[#ff9898]",
            )}
          >
            {delta}
          </p>
        ) : null}
      </div>
    );
  }

  return (
    <div
      className={cn(
        "min-w-0 border-t border-[color:var(--line-weak)] pt-3",
        className,
      )}
    >
      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
        {label}
      </p>
      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
        {value}
      </p>
      {delta ? (
        <p
          className={cn(
            "mt-2 text-xs",
            positive ? "text-[#96f5bf]" : "text-[#ff9898]",
          )}
        >
          {delta}
        </p>
      ) : null}
    </div>
  );
}