import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';

interface DatabaseStatsCardProps {
  title: string;
  icon: LucideIcon;
  stats: Array<{
    label: string;
    value: number | string;
    trend?: {
      value: number;
      period: string;
    };
  }>;
  iconClassName?: string;
}

export function DatabaseStatsCard({ title, icon: Icon, stats, iconClassName }: DatabaseStatsCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Icon className={cn("h-4 w-4 text-muted-foreground", iconClassName)} />
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {stats.map((stat, index) => (
            <div key={index} className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">{stat.label}</span>
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold">{stat.value.toLocaleString()}</span>
                {stat.trend && (
                  <span className="text-xs text-muted-foreground">
                    +{stat.trend.value} ({stat.trend.period})
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}