"use client";

import {
  formatMetricValue,
  getCwvStatus,
  getCwvStatusColor,
  getCwvStatusLabel,
} from "@/lib/scoring";
import { cn } from "@/lib/utils";

export function MetricCard({
  metric,
  label,
  sublabel,
  value,
}: {
  metric: string;
  label: string;
  sublabel?: string;
  value: number | null;
}) {
  if (value == null) {
    return (
      <div className="rounded-xl border border-[#45464d]/10 bg-surface-container p-8">
        <div className="mb-6 space-y-1">
          <h3 className="text-sm font-bold tracking-widest text-muted-foreground uppercase">
            {label}
          </h3>
          {sublabel && <p className="text-xs text-muted-foreground/60">{sublabel}</p>}
        </div>
        <span className="font-[family-name:var(--font-manrope)] text-4xl font-bold text-muted-foreground">
          --
        </span>
      </div>
    );
  }

  const status = getCwvStatus(metric, value);
  const statusColor = getCwvStatusColor(status);
  const statusLabel = getCwvStatusLabel(status);

  return (
    <div className="group rounded-xl border border-[#45464d]/10 bg-surface-container p-8 transition-all hover:border-primary/20">
      <div className="mb-6 flex items-start justify-between">
        <div className="space-y-1">
          <h3 className="text-sm font-bold tracking-widest text-muted-foreground uppercase">
            {label}
          </h3>
          {sublabel && <p className="text-xs text-muted-foreground/60">{sublabel}</p>}
        </div>
        <span
          className={cn(
            "rounded px-2.5 py-1 text-[10px] font-bold tracking-tighter uppercase",
            statusColor,
          )}
        >
          {statusLabel}
        </span>
      </div>
      <div className="mb-6 flex items-baseline gap-2">
        <span className="font-[family-name:var(--font-manrope)] text-4xl font-bold text-foreground">
          {formatMetricValue(metric, value)}
        </span>
      </div>
    </div>
  );
}