import type { ComponentChildren, JSX } from 'preact';
import { cn } from './cn';

export type MetricRowProps = JSX.HTMLAttributes<HTMLDivElement> & {
  label: ComponentChildren;
  value: ComponentChildren;
  description?: ComponentChildren;
};

export function MetricRow({ className, label, value, description, ...props }: MetricRowProps) {
  return (
    <div className={cn('ask-metric-row ask-rounded-xl ask-border ask-border-borderSubtle ask-bg-surface ask-p-3', className)} {...props}>
      <div className="ask-flex ask-items-center ask-justify-between ask-gap-3">
        <div className="ask-min-w-0 ask-text-[11px] ask-font-medium ask-text-textMuted">{label}</div>
        <div className="ask-shrink-0 ask-text-[13px] ask-font-semibold ask-text-textMain">{value}</div>
      </div>
      {description ? <div className="ask-mt-1 ask-text-[11px] ask-leading-5 ask-text-textMuted">{description}</div> : null}
    </div>
  );
}
