import type { LucideIcon } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';

interface StatsCardProps {
    title: string;
    value: number | string;
    icon: LucideIcon;
    description?: string;
    trend?: 'up' | 'down' | 'neutral';
    className?: string;
    iconClassName?: string;
}

export function StatsCard({ title, value, icon: Icon, description, className = '', iconClassName = '' }: StatsCardProps) {
    return (
        <Card
            className={`group relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 ${className}`}
        >
            <CardContent className="p-6">
                <div className="flex items-center justify-between">
                    <div className="space-y-1">
                        <p className="text-sm font-medium text-muted-foreground">{title}</p>
                        <p className="text-3xl font-bold tracking-tight">{value}</p>
                        {description && (
                            <p className="text-xs text-muted-foreground">{description}</p>
                        )}
                    </div>
                    <div
                        className={`rounded-xl bg-primary/10 p-3 transition-transform duration-300 group-hover:scale-110 ${iconClassName}`}
                    >
                        <Icon className="h-6 w-6 text-primary" />
                    </div>
                </div>
            </CardContent>
            {/* Decorative gradient bar at top */}
            <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-primary/60 via-primary to-primary/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
        </Card>
    );
}