---
import BaseLayout from "@components/base/BaseLayout.astro";
import PageHeader from "@components/common/PageHeader.astro";
import type { PoetryEntry } from "@/types";

interface Props {
  entryIndex: PoetryEntry;
  entries: PoetryEntry[];
}

const { entryIndex, entries } = Astro.props;
---

<BaseLayout title={entryIndex.data.title} description={entryIndex.data.description}>
  <PageHeader title={entryIndex.data.title} />
  <section class="section">
    <div class="flex container row justify-center">
      <div class="col lg:col-8">
        <div class="glass rounded-lg p-4 intersect:animate-fadeUp opacity-0">
          <ul>
            {
              entries.map((entry) => (
                <li class="my-2">
                  <a href={`/poetry/${entry.id}`}>
                    <h4>{entry.data.title}</h4>
                  </a>
                </li>
              ))
            }
          </ul>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>
