import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useNavigate } from 'react-router-dom';
import { CATEGORIES, getSolution } from '../data/solutions';
import { SolutionCard } from '../components/SolutionCard';
export const CatalogPage = () => {
    const navigate = useNavigate();
    return (_jsx("main", { className: "section", children: _jsxs("div", { className: "container", children: [_jsx("h1", { className: "section-title", children: "\uC804\uCCB4 \uC194\uB8E8\uC158" }), _jsx("p", { className: "section-sub", children: "\uCE74\uD14C\uACE0\uB9AC\uBCC4 GUARDiA \uC194\uB8E8\uC158 \u2014 \uCD1D 15\uAC1C" }), CATEGORIES.map((cat) => (_jsxs("section", { className: "catalog-cat", children: [_jsxs("h2", { className: "catalog-cat-title", children: [cat.name, _jsx("span", { className: "catalog-cat-count", children: cat.slugs.length })] }), _jsx("div", { className: "card-grid", children: cat.slugs.map((slug) => {
                                const sol = getSolution(slug);
                                if (!sol)
                                    return null;
                                return (_jsx(SolutionCard, { solution: sol, onClick: () => navigate(`/solution/${slug}`) }, slug));
                            }) })] }, cat.name)))] }) }));
};
export default CatalogPage;
