import VideoCard from "./VideoCard";

export default function Shelf({ title, videos, action, emptyText }) {
  if (!videos?.length && emptyText) {
    return (
      <section>
        <h2 className="font-display font-semibold text-lg text-zinc-300 mb-3">{title}</h2>
        <p className="text-sm text-zinc-600">{emptyText}</p>
      </section>
    );
  }
  if (!videos?.length) return null;

  return (
    <section>
      <div className="flex items-center justify-between mb-3">
        <h2 className="font-display font-semibold text-lg text-zinc-300">{title}</h2>
        {action}
      </div>
      <div className="flex gap-4 overflow-x-auto pb-2 -mx-1 px-1">
        {videos.map((v) => (
          <div key={v.youtube_video_id || v.id} className="w-64 shrink-0">
            <VideoCard video={v} />
          </div>
        ))}
      </div>
    </section>
  );
}