"use client"

import * as React from "react"

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

interface MetricComparisonProps extends React.HTMLAttributes<HTMLDivElement> {
  leftLabel: string
  leftValue: number
  rightLabel: string
  rightValue: number
  unit?: string
  prefix?: string
  decimals?: number
  showDifference?: boolean
}

function CompareIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      <path d="M8 7h12" />
      <path d="M16 3l4 4-4 4" />
      <path d="M16 17H4" />
      <path d="M8 21l-4-4 4-4" />
    </svg>
  )
}

function DifferenceIndicator({
  percentage,
  direction,
  className,
}: {
  percentage: number
  direction: "left" | "right" | "equal"
  className?: string
}) {
  if (direction === "equal") {
    return (
      <div className={cn("flex items-center gap-1 text-muted-foreground", className)}>
        <svg
          viewBox="0 0 16 16"
          className="h-3.5 w-3.5"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          aria-hidden="true"
        >
          <path d="M3 8h10" />
        </svg>
        <span className="text-xs font-semibold">Equal</span>
      </div>
    )
  }

  const isLeft = direction === "left"

  return (
    <div className={cn("flex items-center gap-1 text-primary", className)}>
      <svg
        viewBox="0 0 16 16"
        className={cn("h-3.5 w-3.5", isLeft ? "" : "rotate-180")}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M10 3L5 8l5 5" />
      </svg>
      <span className="text-xs font-semibold">{percentage.toFixed(1)}% higher</span>
    </div>
  )
}

const MetricComparison = React.forwardRef<HTMLDivElement, MetricComparisonProps>(
  (
    {
      leftLabel,
      leftValue,
      rightLabel,
      rightValue,
      unit,
      prefix,
      decimals = 0,
      showDifference = true,
      className,
      ...props
    },
    ref
  ) => {
    const formatValue = (value: number) => {
      const formatted = decimals > 0 ? value.toFixed(decimals) : value.toLocaleString()
      return `${prefix || ""}${formatted}${unit || ""}`
    }

    const difference = Math.abs(leftValue - rightValue)
    const baseValue = Math.max(leftValue, rightValue)
    const percentageDiff = baseValue > 0 ? (difference / baseValue) * 100 : 0
    const direction: "left" | "right" | "equal" =
      leftValue > rightValue ? "left" : leftValue < rightValue ? "right" : "equal"

    const leftWidth = baseValue > 0 ? (leftValue / baseValue) * 100 : 50
    const rightWidth = baseValue > 0 ? (rightValue / baseValue) * 100 : 50

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-4 rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <p className="text-xs font-semibold uppercase tracking-[0.15em] text-muted-foreground">
              {leftLabel}
            </p>
            <p
              className={cn(
                "text-2xl font-semibold tabular-nums",
                direction === "left" ? "text-primary" : "text-foreground"
              )}
            >
              {formatValue(leftValue)}
            </p>
          </div>
          <div className="space-y-1 text-right">
            <p className="text-xs font-semibold uppercase tracking-[0.15em] text-muted-foreground">
              {rightLabel}
            </p>
            <p
              className={cn(
                "text-2xl font-semibold tabular-nums",
                direction === "right" ? "text-primary" : "text-foreground"
              )}
            >
              {formatValue(rightValue)}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
            <div
              className={cn(
                "h-full rounded-full transition-all duration-500",
                direction === "left" ? "bg-primary" : "bg-foreground/40"
              )}
              style={{ width: `${leftWidth}%` }}
            />
          </div>
          <CompareIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
          <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
            <div
              className={cn(
                "ml-auto h-full rounded-full transition-all duration-500",
                direction === "right" ? "bg-primary" : "bg-foreground/40"
              )}
              style={{ width: `${rightWidth}%` }}
            />
          </div>
        </div>

        {showDifference ? (
          <div className="flex items-center justify-center">
            <DifferenceIndicator
              percentage={percentageDiff}
              direction={direction}
            />
          </div>
        ) : null}
      </div>
    )
  }
)

MetricComparison.displayName = "MetricComparison"

export { MetricComparison }
export type { MetricComparisonProps }
Metric Comparison

Dependencies

Files

Installation
