Logo loop

1"use client";2 3import { useState, type CSSProperties, type HTMLAttributes } from "react";4import { Pause, Play } from "lucide-react";5 6export type LogoLoopItem = {7  id: string;8  label: string;9};10 11export type LogoLoopProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {12  /** Wordmarks repeated in the strip. */13  items: readonly LogoLoopItem[];14  /** Accessible name for the visible wordmark list. */15  label?: string;16  /** Seconds for one full pass. */17  duration?: number;18  /** Additional class name for the root. */19  className?: string;20};21 22/**23 * A seamless wordmark strip that repeats its visible group for the loop. The24 * strip pauses on hover or focus, and the control gives keyboard and touch25 * users an explicit pause/resume action. Reduced motion shows a static list.26 */27export function LogoLoop({28  items,