import { Card, CardContent } from '@heroui/react';
import type { ReactNode } from 'react';

type Props = {
  icon: ReactNode;
  label: string;
  value: string | number;
  trend?: string;
  color?: 'accent' | 'success' | 'warning' | 'danger' | 'default';
};

const iconClasses: Record<NonNullable<Props['color']>, string> = {
  accent: 'bg-accent-soft text-accent-soft-foreground',
  success: 'bg-success-soft text-success-soft-foreground',
  warning: 'bg-warning-soft text-warning-soft-foreground',
  danger: 'bg-danger-soft text-danger-soft-foreground',
  default: 'bg-default-soft text-muted',
};

export function StatCard({ icon, label, value, trend, color = 'default' }: Props) {
  return (
    <Card>
      <CardContent className="flex flex-row items-center gap-3 p-3">
        <div className={`flex size-8 shrink-0 items-center justify-center rounded-lg ${iconClasses[color]}`}>
          {icon}
        </div>
        <div className="min-w-0 flex-1">
          <div className="truncate text-xs text-muted">{label}</div>
          <div className="text-lg font-bold leading-tight tracking-tight">{value}</div>
        </div>
        {trend && (
          <span className={`shrink-0 text-xs font-medium ${trend.startsWith('+') ? 'text-success' : trend.startsWith('-') ? 'text-danger' : 'text-muted'}`}>
            {trend}
          </span>
        )}
      </CardContent>
    </Card>
  );
}