---
import BaseLayout from "@components/base/BaseLayout.astro";
import Pagination from "@components/common/Pagination.astro";
import Share from "@components/common/Share.astro";
import { plainify } from "@lib/textConverter";
import type { PoetryEntry } from "@/types";

import { render } from "astro:content";
import EntryHeader from "@components/common/EntryHeader.astro";
interface Props {
  entry: PoetryEntry;
  pageIDs: string[];
  pageIndex: number;
  pageCount: number;
}

const { entry, pageIDs, pageIndex, pageCount }: Props = Astro.props;
const { title, description, autodescription, image } = entry.data;
const { Content } = await render(entry);

const descriptionLength = 200;

const entryDescription =
  description ||
  (autodescription ? plainify(entry.body!.slice(0, descriptionLength)) : null);
---

<BaseLayout title={title} description={entryDescription} image={image?.src}>
  <section class="flex container justify-center my-8">
    <div class="col md:col-8">
      <article class="">
        <section>
          <EntryHeader entry={entry} showImage showAuthor showDate />
        </section>
        <section class="content mb-4 glass px-4 rounded-lg">
          <Content />
        </section>
      </article>
    </div>
  </section>
  <section class=`container mt-4 mb-8 col md:col-8`>
    <hr />
    <div class="flex items-center justify-center lg:justify-end mt-4">
      <Share
        title={title}
        description={entryDescription}
        folder={"poetry"}
        id={entry.id}
      />
    </div>
  </section>
  <Pagination
    collection="poetry"
    pageIDs={pageIDs}
    pageIndex={pageIndex}
    pageCount={pageCount}
  />
</BaseLayout>
