import { describe, expect, it } from 'vitest';
import BlogIndexBody from './BlogIndexBody.astro';
import {
  INDEX_HERO_XSS,
  INDEX_MOD_CARDS,
  INDEX_POSTS,
  INDEX_POSTS_NO_DATE,
  INDEX_SITE_NAME,
  assertHeroSanitized,
  assertIndexEmptyState,
  assertNoMainElement,
  assertNoTimeElement,
  assertSiteNameInH1,
  assertTimeElementRendered,
  renderBodyComponent,
} from '../../test/body-component-render';

describe('BlogIndexBody', () => {
  it('renders siteName in h1 and omits main', async () => {
    const html = await renderBodyComponent(BlogIndexBody, {
      siteName: INDEX_SITE_NAME,
      heroHtml: '<p>Blog hero</p>',
      posts: INDEX_POSTS,
      modCards: INDEX_MOD_CARDS,
    });
    assertSiteNameInH1(html, INDEX_SITE_NAME);
    assertNoMainElement(html);
    expect(html).toContain('Alpha post');
    expect(html).toContain('class="blog-home__feed"');
  });

  it('shows empty state when posts is empty', async () => {
    const html = await renderBodyComponent(BlogIndexBody, {
      siteName: INDEX_SITE_NAME,
      heroHtml: '',
      posts: [],
      modCards: [],
    });
    assertIndexEmptyState(html);
  });

  it('sanitizes heroHtml before cms-body output', async () => {
    const html = await renderBodyComponent(BlogIndexBody, {
      siteName: INDEX_SITE_NAME,
      heroHtml: INDEX_HERO_XSS,
      posts: [],
      modCards: [],
    });
    assertHeroSanitized(html);
  });

  it('renders <time datetime> for posts with createdAt, omits for empty', async () => {
    const html = await renderBodyComponent(BlogIndexBody, {
      siteName: INDEX_SITE_NAME,
      heroHtml: '',
      posts: INDEX_POSTS,
      modCards: [],
    });
    assertTimeElementRendered(html, '2026-06-18T10:00:00.000Z');

    const htmlNoDate = await renderBodyComponent(BlogIndexBody, {
      siteName: INDEX_SITE_NAME,
      heroHtml: '',
      posts: INDEX_POSTS_NO_DATE,
      modCards: [],
    });
    assertNoTimeElement(htmlNoDate);
  });
});