---
import BaseLayout from './BaseLayout.astro';
import BlogPostFooter from '../components/BlogPostFooter.astro';
import LikeViewCounter from '../components/LikeViewCounter.astro';
const { entry } = Astro.props;
---
<BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage} lang={entry.data.lang} type="article">
  <article class="blog-post">
    <header class="article-header container">
      <h1>{entry.data.title}</h1>
      <div class="article-byline">
        <img src="/assets/images/rula-diab-avatar.jpg" alt="" />
        <p><strong>Rula Diab, Clinical Director, M.Ed, BCBA, LBA</strong><br /><time datetime={entry.data.date.toISOString()}>{entry.data.date.toLocaleDateString(entry.data.lang, { day: '2-digit', month: 'long', year: 'numeric' })}</time></p>
      </div>
      {entry.data.featuredImage && <div class="article-featured"><img src={entry.data.featuredImage} alt={entry.data.alt || ''} /></div>}
    </header>
    <div class="prose blog-post-body container"><slot /></div>
    <div class="container"><LikeViewCounter slug={entry.data.slug} /></div>
  </article>
  <BlogPostFooter entryId={entry.id} />
</BaseLayout>

<style>
  .article-header { padding-block: 4.5rem 0; text-align: left; }
  .article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
  .article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }
  .article-byline img { margin-top: 0; height: 52px; width: 52px; }
  .article-featured { height: 480px; margin: 3rem auto 0; max-width: 800px; overflow: hidden; }
  .article-featured img { height: 100%; margin: 0; object-fit: cover; width: 100%; }
  @media (max-width: 760px) {
    .article-featured { height: auto; }
  }
</style>