// Horizontal scroll carousel with prev/next + progress
window.Carousel=function Carousel({children,viewAll,labelAll}){
  const ref=React.useRef(null);
  const [p,setP]=React.useState(0);
  const upd=()=>{
    const el=ref.current;if(!el) return;
    const max=el.scrollWidth-el.clientWidth;
    setP(max>0?(el.scrollLeft/max)*100:0);
  };
  React.useEffect(()=>{
    const el=ref.current;if(!el) return;
    el.addEventListener("scroll",upd);
    upd();
    return ()=>el.removeEventListener("scroll",upd);
  },[]);
  const step=(dir)=>{
    const el=ref.current;if(!el) return;
    const card=el.firstChild;
    const w=card?card.getBoundingClientRect().width+20:300;
    el.scrollBy({left:dir*w,behavior:"smooth"});
  };
  return (
    <div className="carousel">
      <div className="carousel-track" ref={ref}>{children}</div>
      <div className="carousel-foot">
        <div className="carousel-nav">
          <button className="icon-btn" onClick={()=>step(-1)} disabled={p<2}><Icon.arrowL/></button>
          <button className="icon-btn" onClick={()=>step(1)} disabled={p>97}><Icon.arrow/></button>
        </div>
        <div className="carousel-progress"><i style={{width:Math.max(8,p)+"%"}}></i></div>
        {viewAll?<a href={viewAll} className="btn btn-ghost btn-sm">{labelAll}<Icon.arrow/></a>:null}
      </div>
    </div>
  );
};