import Image from "next/image";
import Link from "next/link";
import { formatDate } from "@/lib/utils";

type VideoCardProps = {
  category?: string | null;
  date?: Date | string | null;
  description: string;
  href: string;
  thumbnail?: string | null;
  title: string;
  youtubeId: string;
};

export function VideoCard({
  category,
  date,
  description,
  href,
  thumbnail,
  title,
  youtubeId
}: VideoCardProps) {
  const imageUrl = thumbnail || `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;

  return (
    <article className="youtube-card">
      <Link className="youtube-thumb" href={href}>
        <Image alt={title} fill sizes="(max-width: 700px) 100vw, 25vw" src={imageUrl} unoptimized />
        <span className="youtube-play">▶</span>
        <span className="youtube-badge">YouTube</span>
      </Link>
      <div className="youtube-card-body">
        <Link className="youtube-title" href={href}>{title}</Link>
        <p>{description || "Watch this video from Just Chill Nepal."}</p>
        <div className="youtube-meta">
          <span>{category ?? "Just Chill Nepal"}</span>
          <span>{formatDate(date)}</span>
        </div>
      </div>
    </article>
  );
}