import React from "react";
import Icon from "../Icon/Icon";
const ConceptCards = (props) => {
    const columns = props.columns || 2;
    const getGridClasses = () => {
        switch (columns) {
            case 1:
                return "grid-cols-1";
            case 2:
                return "grid-cols-1 md:grid-cols-2";
            case 3:
                return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
            case 4:
                return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
            default:
                return "grid-cols-1 md:grid-cols-2";
        }
    };
    return (React.createElement("div", { className: `grid ${getGridClasses()} gap-3` }, props.cards.map((card, index) => {
        return (React.createElement("div", { key: index, className: "border border-gray-200 rounded-md p-3 bg-white hover:border-gray-300 transition-colors" },
            React.createElement("div", { className: "flex items-start space-x-3" },
                React.createElement("div", { className: "flex-shrink-0 w-8 h-8 rounded flex items-center justify-center", style: { backgroundColor: `${card.iconColor.toString()}15` } },
                    React.createElement(Icon, { icon: card.icon, className: "h-4 w-4", style: { color: card.iconColor.toString() } })),
                React.createElement("div", { className: "flex-1 min-w-0" },
                    React.createElement("h4", { className: "text-sm font-medium text-gray-900" }, card.title),
                    React.createElement("p", { className: "text-sm text-gray-500 mt-1 leading-relaxed" }, card.description)))));
    })));
};
export default ConceptCards;
//# sourceMappingURL=ConceptCards.js.map