---
import type { CollectionEntry } from 'astro:content';
import Base from './Base.astro';
import FormattedDate from '../components/FormattedDate.astro';

type Props = CollectionEntry<'blog'>['data'] & { id?: string };

const { title, description, pubDate, updatedDate, heroImage, id } = Astro.props;
---

<Base title={title} description={description}>
  <article class="max-w-3xl mx-auto">
    {heroImage && (
      <img class="w-full rounded-xl mb-6 object-cover" style="max-height: 400px" src={heroImage} alt="" />
    )}
    <div class="mb-6 pb-4 border-b" style="border-color: var(--border)">
      <div class="text-sm mb-2" style="color: var(--text-4)">
        <FormattedDate date={pubDate} />
        {updatedDate && (
          <span class="italic"> · Aggiornato <FormattedDate date={updatedDate} /></span>
        )}
      </div>
      <div class="flex items-start justify-between gap-4">
        <h1 class="text-3xl font-bold" style="color: var(--text-primary)">{title}</h1>
        {id && (
          <button
            data-slug={id}
            id="edit-post-btn"
            class="shrink-0 text-xs text-zinc-500 hover:text-white transition-colors px-2 py-1 rounded border border-zinc-700 hover:border-zinc-500 mt-1"
          >Modifica</button>
        )}
      </div>
    </div>
    <div class="prose-wiki">
      <slot />
    </div>
  </article>
</Base>

<script>
  document.getElementById('edit-post-btn')?.addEventListener('click', (e) => {
    const slug = (e.currentTarget as HTMLElement).dataset.slug;
    window.dispatchEvent(new CustomEvent('open-editor', { detail: { slug, apiBase: '/stories' } }));
  });
</script>