import React, { type ReactNode } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Skeleton } from "./ui/skeleton";
import { type LucideIcon, ChevronRight } from "lucide-react";
import { cn } from "../lib/utils";

interface StatCardProps {
    title: string;
    value: ReactNode;
    subtitle?: ReactNode;
    icon: LucideIcon;
    isLoading?: boolean;
    className?: string;
    valueClassName?: string;
    iconClassName?: string;
    onClick?: () => void;
}

export function StatCard({
    title,
    value,
    subtitle,
    icon: Icon,
    isLoading = false,
    className,
    valueClassName,
    iconClassName,
    onClick,
}: StatCardProps) {
    return (
        <Card
            className={cn(
                "glass-card border-none bg-card/40 hover-glow group transition-all duration-300",
                onClick && "cursor-pointer hover:bg-card/60 hover:scale-[1.02] active:scale-[0.98]",
                className
            )}
            onClick={onClick}
        >
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative overflow-hidden">
                <CardTitle className="text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors">
                    {title}
                </CardTitle>
                <div className="flex items-center gap-2">
                    {onClick && (
                        <span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 flex items-center gap-1">
                            Manage <ChevronRight className="w-3 h-3" />
                        </span>
                    )}
                    <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center ring-1 ring-primary/20">
                        <Icon className={cn(
                            "h-4 w-4 transition-all duration-300 text-primary",
                            onClick && "group-hover:scale-110",
                            iconClassName
                        )} />
                    </div>
                </div>
            </CardHeader>
            <CardContent>
                {isLoading ? (
                    <div className="space-y-2">
                        <Skeleton className="h-8 w-[60px]" />
                        <Skeleton className="h-3 w-[100px]" />
                    </div>
                ) : (
                    <>
                        <div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
                        {subtitle && (
                            <p className="text-xs text-muted-foreground mt-1">
                                {subtitle}
                            </p>
                        )}
                    </>
                )}
            </CardContent>
        </Card >
    );
}