import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SolutionIcon } from './SolutionIcon';
export const SolutionCard = ({ solution, onClick }) => {
    const { slug, name, tagline, color, status, port } = solution;
    return (_jsxs("button", { className: "solution-card", onClick: onClick, style: { ['--card-color']: color }, children: [_jsxs("div", { className: "solution-card-top", children: [_jsx("span", { className: "solution-card-icon", style: { color, background: `${color}1a`, borderColor: `${color}40` }, children: _jsx(SolutionIcon, { slug: slug, size: 28, color: color }) }), status === 'live' ? (_jsx("span", { className: "badge badge-live", children: "LIVE" })) : (_jsx("span", { className: "badge badge-soon", children: "SOON" }))] }), _jsx("h3", { className: "solution-card-name", children: name }), _jsx("p", { className: "solution-card-tagline", children: tagline }), _jsxs("div", { className: "solution-card-foot", children: [_jsxs("span", { className: "solution-card-port", children: [":", port] }), _jsxs("span", { className: "solution-card-more", style: { color }, children: ["\uC0C1\uC138 \uBCF4\uAE30", _jsx(SolutionIcon, { slug: "chevron-right", size: 14, color: color })] })] })] }));
};
export default SolutionCard;
