Metric Comparison Row

'use client';

import type { CSSProperties } from 'react';
import './MetricComparisonRow.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * MetricComparisonRow — Horizontal gauge comparing actual performance vs target benchmark with percentage badge.
 * 
 * @param {string} title - Benchmark description (e.g. 'Monthly Revenue Target').
 * @param {number} current - Current numeric value figure.
 * @param {number} target - Goal target value.
 * @param {string} unit - Unit prefix or suffix (e.g. '$', 'ms', 'users'). Default is '$'.
 * @param {string} color - Progress bar accent color. Default is '#d4a017'.
 */
export interface MetricComparisonRowProps {
  title: string;
  current: number;
  target: number;
  unit?: string;
  color?: string;
}

export function MetricComparisonRow({
  title = 'Quarterly Revenue Target',
  current = 8450,
  target = 10000,
  unit = '$',
  color = '#d4a017',
}: MetricComparisonRowProps) {
  const safeCurrent = current ?? 0;
  const safeTarget = (target && target > 0) ? target : 1;
  const percent = Math.min(100, Math.round((safeCurrent / safeTarget) * 100));
  return (
    <>
      <div className="metric-row" style={st(`--metric-accent: ${color};`)} data-rk-4ef0f8="">
        <div className="metric-row__header" data-rk-4ef0f8="">
          <div className="metric-row__title-wrap" data-rk-4ef0f8="">
            <h5 className="metric-row__title" data-rk-4ef0f8="">{title}</h5>
            <span className="metric-row__ratio" data-rk-4ef0f8="">{unit}{safeCurrent.toLocaleString()} of {unit}{safeTarget.toLocaleString()}</span>
          </div>
          <span className="metric-row__badge" data-rk-4ef0f8="">{percent}%</span>
        </div>
      
        <div className="metric-row__track" role="progressbar" aria-valuenow={safeCurrent} aria-valuemax={safeTarget} aria-valuemin={0} data-rk-4ef0f8="">
          <div className="metric-row__fill" style={st(`width: ${percent}%;`)} data-rk-4ef0f8=""></div>
        </div>
      </div>
    </>
  );
}

export default MetricComparisonRow;

/* MetricComparisonRow — ported from astro-component-kit (data/MetricComparisonRow.astro) */

.metric-row:where([data-rk-4ef0f8]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  padding: var(--sp-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md, 14px);
  font-family: var(--font-sans, system-ui, sans-serif);
}

.metric-row__header:where([data-rk-4ef0f8]) {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.metric-row__title-wrap:where([data-rk-4ef0f8]) {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-row__title:where([data-rk-4ef0f8]) {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-text-1, #ffffff);
  margin: 0;
}

.metric-row__ratio:where([data-rk-4ef0f8]) {
  font-size: 0.75rem;
  color: var(--c-text-3, #737373);
}

.metric-row__badge:where([data-rk-4ef0f8]) {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--metric-accent);
  background: rgba(184, 134, 11, 0.12);
  border: 1px solid rgba(184, 134, 11, 0.3);
  padding: 2px 8px;
  border-radius: var(--r-full, 9999px);
}

.metric-row__track:where([data-rk-4ef0f8]) {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-full, 9999px);
  overflow: hidden;
}

.metric-row__fill:where([data-rk-4ef0f8]) {
  height: 100%;
  background: linear-gradient(90deg, #b8860b, var(--metric-accent));
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(212, 160, 23, 0.4);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}