import * as React from 'react';
import { clsx } from 'clsx';

export interface MetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
  label: React.ReactNode;
  value: React.ReactNode;
  helper?: React.ReactNode;
  trend?: React.ReactNode;
  tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info';
}

const toneClass: Record<NonNullable<MetricCardProps['tone']>, string> = {
  neutral: 'text-[var(--bl-text-secondary)]',
  success: 'text-[var(--bl-success)]',
  warning: 'text-[var(--bl-warning)]',
  danger: 'text-[var(--bl-danger)]',
  info: 'text-[var(--bl-info,var(--bl-accent))]',
};

export function MetricCard({
  label,
  value,
  helper,
  trend,
  tone = 'neutral',
  className,
  ...props
}: MetricCardProps) {
  return (
    <div
      className={clsx(
        'rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-4 shadow-sm shadow-black/[0.03]',
        className
      )}
      {...props}
    >
      <div className="text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary)]">
        {label}
      </div>
      <div className="mt-2 text-2xl font-semibold leading-8 text-[var(--bl-text-primary)]">
        {value}
      </div>
      {(helper || trend) && (
        <div className={clsx('mt-2 text-sm leading-5', toneClass[tone])}>{trend ?? helper}</div>
      )}
    </div>
  );
}