import type { Delta } from "@/lib/date-range";

function DeltaBadge({ delta }: { delta: Delta }) {
  if (delta.direction === "flat" || delta.percent === null) {
    return (
      <span className="inline-flex items-center gap-1 text-xs font-medium text-kolabora-neutral-dark/50">
        — vs periode lalu
      </span>
    );
  }

  const isUp = delta.direction === "up";
  return (
    <span
      className={`inline-flex items-center gap-1 text-xs font-medium ${
        isUp ? "text-green-600" : "text-red-600"
      }`}
    >
      <svg
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
        className={isUp ? "" : "rotate-180"}
      >
        <path d="M12 19V5M5 12l7-7 7 7" />
      </svg>
      {isUp ? "+" : "-"}
      {delta.percent.toLocaleString("en-US", { maximumFractionDigits: 1 })}% vs last period
    </span>
  );
}

export function MetricCard({
  label,
  value,
  delta,
}: {
  label: string;
  value: string;
  delta?: Delta;
}) {
  return (
    <div className="rounded-xl border border-kolabora-neutral-dark/10 p-4">
      <p className="text-[13px] text-kolabora-neutral-dark/60">{label}</p>
      <p className="mt-1 text-2xl font-semibold sm:text-[26px]">{value}</p>
      {delta && <div className="mt-1.5">{<DeltaBadge delta={delta} />}</div>}
    </div>
  );
}