import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import { TrendingDown, TrendingUp } from 'lucide-react';
import type { ElementType } from 'react';

interface StatisticsCardProps {
    title: string;
    value: string | number;
    subtitle?: string;
    subtitleColor?: 'green' | 'red' | 'gray';
    icon?: string | ElementType;
    iconColor?: string;
    iconBg?: string;
    className?: string;
}

const subtitleColorStyles: Record<string, string> = {
    green: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
    red: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
    gray: 'bg-slate-50 text-slate-700 dark:bg-slate-500/10 dark:text-slate-400',
};

export default function StatisticsCard({
    title,
    value,
    subtitle,
    subtitleColor = 'gray',
    icon: Icon,
    iconColor = 'text-amber-600',
    iconBg = 'bg-amber-50',
    className,
}: StatisticsCardProps) {
    const isPositive = subtitleColor === 'green';
    const isNegative = subtitleColor === 'red';

    return (
        <Card className={cn("rounded-2xl border-slate-200 bg-white transition-all duration-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950", className)}>
            <CardContent className="px-3 pt-2 pb-1">
                <div className="flex items-center justify-between">
                    {/* Left: Content Stack */}
                    <div className="flex flex-col space-y-3">
                        <p className="text-xs font-bold tracking-widest text-slate-500 uppercase">
                            {title}
                        </p>

                        <h3 className="text-3xl font-bold tracking-tight text-[#0F172A] dark:text-white">
                            {value}
                        </h3>

                        {subtitle && (
                            <div className="pt-1">
                                <span className={cn(
                                    "inline-flex items-center gap-1 rounded-full py-0.5 text-xs font-bold leading-none",
                                    subtitleColorStyles[subtitleColor]
                                )}>
                                    {isPositive && <TrendingUp className="h-3 w-3" />}
                                    {isNegative && <TrendingDown className="h-3 w-3" />}
                                    {subtitle}
                                </span>
                            </div>
                        )}
                    </div>

                    {/* Right: Icon Container */}
                    {Icon && (
                        <div className={cn(
                            "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl transition-transform duration-300 hover:rotate-3",
                            iconBg
                        )}>
                            {typeof Icon === 'string' ? (
                                <img src={Icon} alt={title} className="h-5 w-5 object-contain" />
                            ) : (
                                <Icon className={cn("h-5 w-5", iconColor)} />
                            )}
                        </div>
                    )}
                </div>
            </CardContent>
        </Card>
    );
}