src/components/ui/metrics-card.tsx

import { Card } from '@/components/ui/card';
import React from 'react';

interface MetricsCardProps {
  children?: React.ReactNode
  label: string;
  value: string;
  loading: boolean
}

export function MetricsCard({ children, label, value, loading }: MetricsCardProps) {
  return (
    <Card className="px-6 border-2 bg-white hover:shadow-md transition-shadow gap-3">
      <div className="flex flex-row items-center justify-between">
        <div>
          <div className="text-base text-gray-600 font-medium text-blue-500">{label}</div>
          {
            loading ? "Loading..." : <div className="text-3xl font-bold text-gray-900">{value}</div>
          }
        </div>
        {children && !loading ? <div>{children}</div> : null}
      </div>
    </Card>
  );
}