// src/components/HeroCarousel/HeroCarousel.tsx "use client"; import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import styles from "./HeroCarousel.module.css"; export type HeroSlideProps = { /** Series name for accessibility; visually the logo carries the title. */ title: string; /** Art background. */ src?: string; /** Logo image (or a text fallback node). */ logo?: ReactNode; /** "Sub | Dub · genres" */ meta?: string; description?: string; /** CTA slot — canonical pair: Button primary + a watchlist action. */ actions?: ReactNode; }; export type HeroCarouselProps = { label: string; slide: HeroSlideProps; count: number; activeIndex: number; onSelect?: (index: number) => void; onPrev?: () => void; onNext?: () => void; }; /** * The billboard. One slide is rendered at a time; autoplay progress on the * active tab is code's job (animation on the fill). RTL comes free from * logical properties, not variants. */ export function HeroCarousel({ label, slide, count, activeIndex, onSelect, onPrev, onNext }: HeroCarouselProps) { return (

{slide.logo ? (

{slide.logo}

) : (

{slide.title}

)} {slide.meta && {slide.meta}} {slide.description &&

{slide.description}

} {slide.actions &&

{slide.actions}

}

{Array.from({ length: count }, (_, i) => (

); }