import * as React from 'react';
import { cn } from '@/lib/utils';
import { PriceDelta, type PriceDeltaDirection } from './price-delta';

export interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Tên chỉ số, vd "Giá TB/m²". */
  label: string;
  /** Giá trị chính, đã format sẵn (string) hoặc number. */
  value: string | number;
  /** Đơn vị đi kèm, vd "tr/m²". */
  unit?: string;
  /** Delta % (nếu có). */
  delta?: number;
  /** Ép direction của delta. */
  deltaDirection?: PriceDeltaDirection;
  /** Mô tả phụ, vd "24h", "7 ngày". */
  sublabel?: string;
  /** Prefix icon. */
  icon?: React.ReactNode;
}

/**
 * Card KPI compact cho Market Dashboard.
 * Bố cục: label (sans muted) + value (mono lớn) + delta (signal).
 */
export function StatCard({
  label,
  value,
  unit,
  delta,
  deltaDirection,
  sublabel,
  icon,
  className,
  ...rest
}: StatCardProps) {
  return (
    <div
      className={cn(
        'flex flex-col gap-1 rounded-md border border-border bg-background-elevated px-4 py-3 shadow-elevation-1',
        className,
      )}
      {...rest}
    >
      <div className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-foreground-muted">
        {icon ? <span className="text-foreground-dim">{icon}</span> : null}
        <span>{label}</span>
      </div>
      <div className="flex items-baseline gap-2">
        <span data-numeric className="font-mono text-data-lg font-semibold text-foreground">
          {value}
        </span>
        {unit ? <span className="text-xs text-foreground-muted">{unit}</span> : null}
      </div>
      <div className="flex items-center justify-between">
        {typeof delta === 'number' ? (
          <PriceDelta value={delta} size="sm" direction={deltaDirection} />
        ) : (
          <span />
        )}
        {sublabel ? (
          <span className="text-[11px] text-foreground-dim">{sublabel}</span>
        ) : null}
      </div>
    </div>
  );
}