"use client";

import { ReactNode, useRef } from "react";

export default function Carousel({
  children,
  title,
  subtitle,
}: {
  children: ReactNode;
  title?: string;
  subtitle?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const scroll = (dir: number) => {
    ref.current?.scrollBy({ left: dir * 320, behavior: "smooth" });
  };
  return (
    <div>
      <div className="carousel__head">
        <div>
          {title && <h3 className="carousel__title">{title}</h3>}
          {subtitle && <p className="carousel__subtitle">{subtitle}</p>}
        </div>
        <div className="carousel__controls">
          {[-1, 1].map((d) => (
            <button
              key={d}
              onClick={() => scroll(d)}
              className="carousel__btn"
              aria-label={d < 0 ? "Previous" : "Next"}
            >
              {d < 0 ? "←" : "→"}
            </button>
          ))}
        </div>
      </div>
      <div ref={ref} className="carousel__track no-scrollbar">
        {children}
      </div>
    </div>
  );
}