---
import BaseLayout from "../layouts/BaseLayout.astro";
import ContentCard from "../components/ContentCard.astro";
import MediaModal from "../components/MediaModal.astro";
import { readContentCache } from "../lib/content/cache";
import { youtubeVideos } from "../lib/content/selectors";

const cache = await readContentCache();
const videos = youtubeVideos(cache).sort(
  (a, b) => Date.parse(b.publishedAt) - Date.parse(a.publishedAt),
);
---

<BaseLayout
  title="Videos | SanthoshJ"
  description="Latest and featured YouTube videos."
  canonicalPath="/videos"
>
  <section class="section">
    <div class="section-header">
      <h2>Videos</h2>
      <span class="muted">{videos.length} items</span>
    </div>
    {
      videos.length > 0 ? (
        <div class="grid">
          {videos.map((item) => (
            <ContentCard item={item} placement="videos.list" />
          ))}
        </div>
      ) : (
        <div class="empty">
          No videos yet. Configure <code>YOUTUBE_CHANNEL_ID</code> and run{" "}
          <code>npm run fetch-content</code>.
        </div>
      )
    }
  </section>
  
  <MediaModal />
</BaseLayout>
