import * as React from 'react';
import { clsx } from 'clsx';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

export interface StatCardProps {
  label: string;
  value: string | number;
  trend?: 'up' | 'down' | 'flat';
  trendValue?: string;
  icon?: React.ReactNode;
  className?: string;
}

export function StatCard({ label, value, trend, trendValue, icon, className }: StatCardProps) {
  const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;

  return (
    <div
      className={clsx(
        'rounded-xl border p-5 shadow-sm shadow-black/[0.04]',
        'bg-[var(--bl-surface-card,#1a1a2e)] border-[var(--bl-border,#2a2a4a)]',
        className
      )}
    >
      <div className="flex items-start justify-between">
        <div>
          <p className="mb-1 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary,#a0a0b0)]">
            {label}
          </p>
          <p className="text-2xl font-semibold tracking-tight text-[var(--bl-text-primary,#fff)]">
            {value}
          </p>
        </div>
        {icon && (
          <div className="rounded-lg p-2 bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)]">
            {icon}
          </div>
        )}
      </div>

      {trend && trendValue && (
        <div className="flex items-center gap-1 mt-3 text-xs">
          <TrendIcon
            size={14}
            className={clsx(
              trend === 'up' && 'text-[var(--bl-success,#34D399)]',
              trend === 'down' && 'text-[var(--bl-danger,#FF6E6E)]',
              trend === 'flat' && 'text-[var(--bl-text-secondary,#a0a0b0)]'
            )}
          />
          <span
            className={clsx(
              'font-medium',
              trend === 'up' && 'text-[var(--bl-success,#34D399)]',
              trend === 'down' && 'text-[var(--bl-danger,#FF6E6E)]',
              trend === 'flat' && 'text-[var(--bl-text-secondary,#a0a0b0)]'
            )}
          >
            {trendValue}
          </span>
        </div>
      )}
    </div>
  );
}

StatCard.displayName = 'StatCard';