import { Skeleton } from "antd";
import type { StatCardProps } from "../../types/dashboard";

const StatCard = ({
    title,
    value,
    subtitle,
    icon,
    gradient,
    iconBg,
    loading = false,
}: StatCardProps) => {
    return (
        <div
            style={{
                background: gradient,
                borderRadius: 20,
                padding: "24px 24px 20px",
                position: "relative",
                overflow: "hidden",
                boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
                transition: "transform 0.25s ease, box-shadow 0.25s ease",
                cursor: "default",
                minHeight: 148,
            }}
            onMouseEnter={(e) => {
                (e.currentTarget as HTMLDivElement).style.transform = "translateY(-4px)";
                (e.currentTarget as HTMLDivElement).style.boxShadow = "0 16px 48px rgba(0,0,0,0.18)";
            }}
            onMouseLeave={(e) => {
                (e.currentTarget as HTMLDivElement).style.transform = "translateY(0)";
                (e.currentTarget as HTMLDivElement).style.boxShadow = "0 8px 32px rgba(0,0,0,0.12)";
            }}
        >
            {/* Background decorative circle */}
            <div style={{
                position: "absolute",
                top: -28,
                right: -28,
                width: 110,
                height: 110,
                borderRadius: "50%",
                background: "rgba(255,255,255,0.12)",
                pointerEvents: "none",
            }} />
            <div style={{
                position: "absolute",
                bottom: -40,
                right: 32,
                width: 80,
                height: 80,
                borderRadius: "50%",
                background: "rgba(255,255,255,0.08)",
                pointerEvents: "none",
            }} />

            {/* Header row */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <span style={{
                    fontSize: 11,
                    fontWeight: 700,
                    letterSpacing: "0.12em",
                    textTransform: "uppercase",
                    color: "rgba(255,255,255,0.80)",
                }}>
                    {title}
                </span>

                <div style={{
                    width: 44,
                    height: 44,
                    borderRadius: 14,
                    background: iconBg,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 20,
                    color: "#fff",
                    flexShrink: 0,
                }}>
                    {icon}
                </div>
            </div>

            {/* Value */}
            {loading ? (
                <div style={{ marginTop: 16 }}>
                    <Skeleton.Input active size="large" style={{ width: 130, display: "block", marginBottom: 8 }} />
                    <Skeleton.Input active size="small" style={{ width: 90 }} />
                </div>
            ) : (
                <>
                    <div style={{
                        marginTop: 16,
                        fontSize: 30,
                        fontWeight: 800,
                        color: "#fff",
                        lineHeight: 1.1,
                        letterSpacing: "-0.5px",
                    }}>
                        {value}
                    </div>
                    <div style={{
                        marginTop: 6,
                        fontSize: 13,
                        color: "rgba(255,255,255,0.72)",
                        fontWeight: 500,
                    }}>
                        {subtitle}
                    </div>
                </>
            )}
        </div>
    );
};

export default StatCard;