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

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

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

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