import { ReactNode } from 'react';
import { ArrowDownRight, ArrowUpRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/utils/cn';

export function StatCard({
  label,
  value,
  delta,
  icon,
}: {
  label: string;
  value: string;
  delta?: number;
  icon?: ReactNode;
}) {
  const positive = (delta ?? 0) >= 0;
  return (
    <Card>
      <CardContent className="flex items-start justify-between p-4">
        <div>
          <p className="text-xs font-medium text-muted-foreground">{label}</p>
          <p className="mt-1.5 text-2xl font-semibold tracking-tight">{value}</p>
          {delta !== undefined && (
            <p
              className={cn(
                'mt-1 flex items-center gap-0.5 text-xs font-medium',
                positive ? 'text-success' : 'text-danger'
              )}
            >
              {positive ? <ArrowUpRight className="h-3.5 w-3.5" /> : <ArrowDownRight className="h-3.5 w-3.5" />}
              {Math.abs(delta)}% vs last period
            </p>
          )}
        </div>
        {icon && <div className="rounded-md bg-primary/10 p-2 text-primary">{icon}</div>}
      </CardContent>
    </Card>
  );
}