import { ShortCard } from "@/components/site/ShortCard";
import { VideoCard } from "@/components/site/VideoCard";

export type VideoListItem = {
  category?: string | null;
  description: string;
  href: string;
  id: string;
  kind: "SHORT" | "VIDEO";
  publishedAt: Date | null;
  thumbnail?: string | null;
  title: string;
  youtubeId: string;
};

type VideoSectionProps = {
  description?: string;
  emptyMessage?: string;
  items: VideoListItem[];
  title: string;
  variant: "short" | "video";
};

export function VideoSection({ description, emptyMessage, items, title, variant }: VideoSectionProps) {
  if (items.length === 0 && !emptyMessage) {
    return null;
  }

  return (
    <section className="videos-page-section">
      <div className="section-head videos-page-section__head">
        <div>
          <span className="pill">{variant === "short" ? "9:16 Shorts" : "16:9 Videos"}</span>
          <h2 className="videos-page-section__title">{title}</h2>
          {description ? <p className="muted">{description}</p> : null}
        </div>
      </div>

      {items.length > 0 ? (
        <div className={variant === "short" ? "shorts-grid-4" : "youtube-grid youtube-grid-section"}>
          {items.map((item) =>
            variant === "short" ? (
              <ShortCard
                category={item.category}
                date={item.publishedAt}
                href={item.href}
                key={item.id}
                thumbnail={item.thumbnail}
                title={item.title}
                youtubeId={item.youtubeId}
              />
            ) : (
              <VideoCard
                category={item.category}
                date={item.publishedAt}
                description={item.description}
                href={item.href}
                key={item.id}
                thumbnail={item.thumbnail}
                title={item.title}
                youtubeId={item.youtubeId}
              />
            )
          )}
        </div>
      ) : (
        <p className="admin-empty-state">{emptyMessage}</p>
      )}
    </section>
  );
}