/**
 * Cinta en movimiento continuo (CSS puro). Repite los ítems hasta llenar el ancho
 * y duplica la tira para que el bucle no tenga saltos. Se pausa al pasar el mouse.
 */
export default function Marquee({
  items,
  minItems = 8,
  durationSec = 40,
  className = "",
  ariaLabel,
}: {
  items: React.ReactNode[];
  minItems?: number;
  durationSec?: number;
  className?: string;
  ariaLabel?: string;
}) {
  if (items.length === 0) return null;
  const filled: React.ReactNode[] = [];
  while (filled.length < Math.max(minItems, items.length)) filled.push(...items);

  return (
    <div className={`marquee group overflow-hidden ${className}`} aria-label={ariaLabel}>
      <div className="marquee-track flex w-max" style={{ animationDuration: `${durationSec}s` }}>
        {[0, 1].map((copy) => (
          <div key={copy} className="flex shrink-0" aria-hidden={copy === 1}>
            {filled.map((item, i) => (
              <div key={i} className="shrink-0">
                {item}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}