"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import dynamic from "next/dynamic";
import { Story } from "@/types/story";
import { ClientOnly } from "@/components/client-only/client-only";
import { StoryPortal } from "./stories-portal";
import StoriesProvider from "./stories.provider";

const buttons = {
  "1": dynamic(() =>
    import("./story-bubble-ui-1").then((component) => ({ default: component.StoryBubbleUi1 }))
  ),
  "2": dynamic(() =>
    import("./story-bubble").then((component) => ({ default: component.StoryBubble }))
  ),
};

interface StoriesProps {
  buttonVariant?: keyof typeof buttons;
  data?: Story[][];
}

const Stories = ({ buttonVariant = "1", data }: StoriesProps) => {
  const ButtonUi = buttons[buttonVariant];
  if (data && data.length === 0) {
    return null;
  }
  return (
    <div className="mt-4 mb-4 md:mb-2">
      <StoriesProvider>
        <ClientOnly
          fallback={
            <div className="flex gap-4 overflow-hidden px-4">
              {Array.from(Array(6).keys()).map((i) => (
                <div key={i} className="bg-gray-300 rounded-full min-w-[96px] h-24" />
              ))}
            </div>
          }
        >
          <Swiper slidesPerView="auto" spaceBetween={20} className="!px-4 xl:!px-0">
            {data?.map((stories, idx) => (
              <SwiperSlide className="max-w-max z-[2] !mr-5" key={stories[0].shop_id}>
                <ButtonUi storyIndex={idx} stories={stories} />
              </SwiperSlide>
            ))}
          </Swiper>
        </ClientOnly>
        <StoryPortal stories={data} />
      </StoriesProvider>
    </div>
  );
};

export default Stories;