---
import HackCard from '../../../components/HackCard.astro';
import Layout from '../../../components/Layout.astro';
import { facetValueSlug, getFacetEntries, getHacksForFacet } from '../../../lib/site-data';
import type { FacetName } from '../../../lib/types';

export function getStaticPaths() {
  const browsableFacets: FacetName[] = ['platform', 'base', 'type', 'status'];
  return browsableFacets.flatMap((facet) =>
    getFacetEntries(facet).map(([value]) => ({
      params: { facet, value: facetValueSlug(value) },
      props: { facet, value },
    })),
  );
}

const { facet, value } = Astro.props as { facet: FacetName; value: string };
const facetTitle = facet.replace('_', ' ');
const matches = getHacksForFacet(facet, value);
---

<Layout title={`${value} ${facetTitle} Hacks | ROM Hack Archive`}>
  <section class="browse-header">
    <a class="back-link" href="/">Catalog</a>
    <h1>{value}</h1>
    <p>{matches.length} hacks grouped by {facetTitle}.</p>
  </section>
  <section class="catalog-results browse-results">
    <div class="hack-grid">
      {matches.map((hack) => <HackCard hack={hack} />)}
    </div>
  </section>
</Layout>