import React from 'react';
import { useNavigate } from 'react-router-dom';
import { CATEGORIES, getSolution } from '../data/solutions';
import { SolutionCard } from '../components/SolutionCard';

export const CatalogPage: React.FC = () => {
  const navigate = useNavigate();

  return (
    <main className="section">
      <div className="container">
        <h1 className="section-title">전체 솔루션</h1>
        <p className="section-sub">카테고리별 GUARDiA 솔루션 — 총 15개</p>

        {CATEGORIES.map((cat) => (
          <section className="catalog-cat" key={cat.name}>
            <h2 className="catalog-cat-title">
              {cat.name}
              <span className="catalog-cat-count">{cat.slugs.length}</span>
            </h2>
            <div className="card-grid">
              {cat.slugs.map((slug) => {
                const sol = getSolution(slug);
                if (!sol) return null;
                return (
                  <SolutionCard
                    key={slug}
                    solution={sol}
                    onClick={() => navigate(`/solution/${slug}`)}
                  />
                );
              })}
            </div>
          </section>
        ))}
      </div>
    </main>
  );
};

export default CatalogPage;
