---
import { formatDuration, timeAgo, type Video } from "@/lib/videos";

interface Props {
  video: Video;
  /** grid: a 16:9 card, short: a 9:16 card, compact: a sidebar row */
  layout?: "grid" | "short" | "compact";
  now: number;
  eager?: boolean;
}

const { video, layout = "grid", now, eager = false } = Astro.props;
---
<a class:list={["video-card", `video-card-${layout}`]} href={`/videos/${video.rkey}`}>
  <div class="video-thumb">
    {video.thumbnail && (
      <img src={video.thumbnail} alt="" loading={eager ? "eager" : "lazy"} decoding="async" />
    )}
    {video.duration && <span class="video-duration">{formatDuration(video.duration)}</span>}
  </div>
  <div class="video-info">
    <h2 class="video-title">{video.title}</h2>
    <p class="video-meta"><time datetime={video.date}>{timeAgo(video.date, now)}</time></p>
  </div>
</a>