"use client";

import cx from "classnames";
import type { ReactNode } from "react";
import React from "react";
import { useStatic } from "@/utils/hooks";
import CarouselPromotionsStatic from "./CarouselPromotions.static";
import {
  CLASS_DOTS,
  CLASS_NEXT,
  CLASS_ROOT,
  CLASS_TRACK,
  CLASS_VIEWPORT,
  CLASS_VIEWPORT_WRAPPER,
} from "./constants";

interface CarouselPromotionsProps {
  className?: string;
  swiperOptions?: Record<string, any>;
  children?: ReactNode;
  [key: string]: any;
}

const CarouselPromotions: React.FC<CarouselPromotionsProps> = ({
  className,
  swiperOptions,
  children,
  ...other
}) => {
  const [carouselRef] = useStatic(CarouselPromotionsStatic);

  const classes = cx(CLASS_ROOT, className);

  const elementClasses = {
    next: cx(CLASS_NEXT, "hide-lg"),
    dots: cx(CLASS_DOTS),
  };

  return (
    <div
      className={classes}
      ref={carouselRef}
      data-carousel-promotions
      {...(swiperOptions
        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
        : {})}
      {...other}
    >
      <div className={CLASS_VIEWPORT_WRAPPER}>
        <div className={CLASS_VIEWPORT}>
          <div className={CLASS_TRACK}>{children}</div>
        </div>
      </div>
      <div role="tablist" className={elementClasses.dots} />
    </div>
  );
};

CarouselPromotions.displayName = "CarouselPromotions";

export { CarouselPromotions };