import React from "react";

interface MiniCard {
    title: string;
    value: string | number;
    subtitle?: string;
    icon: React.ReactNode;
    bgColor?: string;     // icon background
    iconColor?: string;   // icon color
}

interface Props {
    data: MiniCard[];
}

const MiniDashboard: React.FC<Props> = ({ data }) => {
    return (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
            {data.map((item, index) => (
                <div
                    key={index}
                    className="p-4 rounded-xl bg-white border flex items-start gap-4"
                >
                    {/* Icon */}
                    <div
                        className={`p-3 rounded-lg ${item.bgColor || "bg-gray-100"} ${item.iconColor || "text-black"}`}
                    >
                        {item.icon}
                    </div>

                    {/* Content */}
                    <div>
                        <div className="text-sm text-gray-800">{item.title}</div>
                        <div className="text-xl font-semibold">{item.value}</div>
                        {item.subtitle && (
                            <div className="text-xs text-gray-400">
                                {item.subtitle}
                            </div>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );
};

export default MiniDashboard;