import { useNavigate } from "react-router-dom";
import { api } from "../api.js";

export default function LibraryMarquee({ items = [] }) {
  const navigate = useNavigate();
  const list = items.filter((x) => x && x.coverImage);
  if (!list.length) return null;

  const rowA = list.slice(0, 15);
  // Second row usually offsets by 10; fall back to row A when the library is
  // too small so the reverse row never renders empty.
  const rowB = list.length > 10 ? list.slice(10, 25) : rowA;

  return (
    <section className="library-section">
      <div className="library-header">
        <div className="library-header-line" />
        <div className="library-header-text">A LIBRARY THAT KEEPS MOVING</div>
        <div className="library-header-line right" />
      </div>
      <div className="marquee-track">
        <div className="marquee-row">
          {rowA.concat(rowA).map((item, idx) => (
            <div key={idx} className="marquee-poster" onClick={() => navigate(`/anime/${item.id}`)}>
              <img src={api.img(item.coverImage)} alt={item.id} loading="lazy" />
            </div>
          ))}
        </div>
        <div className="marquee-row reverse">
          {rowB.concat(rowB).map((item, idx) => (
            <div key={idx} className="marquee-poster" onClick={() => navigate(`/anime/${item.id}`)}>
              <img src={api.img(item.coverImage)} alt={item.id} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}