"use client";

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

export function AssetAnalyticsMetricCard({
  label,
  value,
  highlight,
}: {
  label: string;
  value: string;
  highlight?: "positive" | "negative" | "neutral";
}) {
  return (
    <div className="flex min-h-[100px] flex-col rounded-xl border border-border/80 bg-card p-3.5 shadow-sm transition-shadow hover:shadow-md">
      <p className="font-medium text-[11px] text-muted-foreground uppercase tracking-wide leading-snug">{label}</p>
      <div className="mt-2 min-w-0 flex-1">
        <p
          className={cn(
            "font-semibold text-base leading-tight tabular-nums sm:text-lg",
            highlight === "positive" && "text-emerald-600 dark:text-emerald-400",
            highlight === "negative" && "text-red-600 dark:text-red-400",
            !highlight || highlight === "neutral" ? "text-foreground" : "",
          )}
        >
          {value || "—"}
        </p>
      </div>
    </div>
  );
}