import React from 'react';
import clsx from 'clsx';
import { Card } from '@/components/ui/Card';
import { Badge, BadgeVariant } from '@/components/ui/Badge';

export interface StatCardProps {
  label: string;
  value: string | number;
  change?: string;
  changeVariant?: BadgeVariant;
  icon?: React.ReactNode;
  testId?: string;
}

export function StatCard({ label, value, change, changeVariant = 'success', icon, testId }: StatCardProps) {
  return (
    <Card>
      <div className="flex items-center justify-between" data-testid={testId}>
        <div>
          <p className="text-sm text-secondary-500">{label}</p>
          <p className="text-2xl font-bold text-secondary-900 mt-1">{value}</p>
          {change && (
            <p className="text-xs mt-1">
              <Badge variant={changeVariant} dot>{change}</Badge>
            </p>
          )}
        </div>
        {icon && (
          <div className="w-12 h-12 rounded-lg bg-primary-50 flex items-center justify-center text-primary-600" aria-hidden="true">
            {icon}
          </div>
        )}
      </div>
    </Card>
  );
}