---
import BaseLayout from './BaseLayout.astro';
import PageHero from '../components/PageHero.astro';
import { getPublication } from '../utils/publication';

interface Props {
  title: string;
  heading?: string;
  description: string;
  intro?: string[];
  lang?: 'en' | 'ar' | 'es';
}

const { title, heading, description, intro = [], lang = 'en' } = Astro.props;
const { entry } = await getPublication(Astro.url.pathname);
---
<BaseLayout title={title} description={description} lang={lang}>
  <PageHero title={entry.data.displayH1 ?? heading ?? title} image="/assets/images/hero-library-index.webp" eyebrow="Welcome to" constrain />
  <section class="library-intro">
    <div class="container">
      <h2>Library</h2>
      {intro.length ? intro.map((paragraph) => <p>{paragraph}</p>) : <p>{description}</p>}
    </div>
  </section>
  <div class="container section library-layout"><slot /></div>
</BaseLayout>

<style>
  :global(.library-intro) { background: var(--color-primary); color: white; padding-block: 3rem; }
  :global(.library-intro h2) { color: white; }
  :global(.library-layout) { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) 240px; }
  :global(.library-sidebar) { position: sticky; top: 1rem; }
  :global(.library-sidebar h2) { font-size: 1.1rem; margin-top: 2rem; }
  :global(.library-sidebar ul) { list-style: none; padding: 0; }
  :global(.library-sidebar li) { border-bottom: 1px solid var(--color-border); padding-block: .65rem; }
  :global(.library-sidebar a) { color: var(--color-primary); font-size: .9rem; }
  :global(.blog-list) { display: block; }
  :global(.library-search-results[hidden]), :global(.library-archive[hidden]), :global(.blog-list[hidden]) { display: none; }
  :global(.library-search-results h2) { margin-top: 0; }
  :global(.library-search-result) { border-bottom: 1px solid var(--color-border); margin-bottom: 2rem; padding-bottom: 1.5rem; }
  :global(.library-search-result h3) { font-family: var(--font-body); margin-bottom: .65rem; }
  :global(.library-search-result p) { margin-bottom: .65rem; }
  :global(.library-search-result__meta) { font-size: .85rem; }
  :global(.library-search-results__pager) { display: flex; gap: .75rem; }
  @media (max-width: 760px) {
    :global(.library-layout) { grid-template-columns: 1fr; }
    :global(.library-sidebar) { position: static; }
  }
</style>