import React from "react";
import { TabSwitch } from "../carousel/helper";
import { ProductCardCarousel, TestimonialCarousel } from "./helper";
import {
  CarouselProps,
  CarouselWithProductCards,
  CarouselWithTestimonialCards,
} from "./types";

import { Text } from "@shared/components/text";

export const Carousel: React.FC<CarouselProps> = ({
  fields,
  hasTestimonialCards,
  hasProductCards,
  disclaimerText,
  backgroundColor,
  activeTab,
  setActiveTab,
  tabs,
  onModalButtonClick,
  renderCheckPlans,
  testimonialAutoScroll = true,
  showSwitch = false,
}) => {
  const baseClass = hasProductCards
    ? "px-3 py-9 md:py-20"
    : hasTestimonialCards
      ? "px-3 py-12 md:pt-20 md:pb-16"
      : "";
  return (
    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
        <div>
          <Text
            as="h2"
            className="heading2 text-text md:heading1 md:text-center"
          >
            {fields?.title}
          </Text>
          {fields?.subTitle && (
            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
              {fields?.subTitle}
            </Text>
          )}
        </div>
        {hasProductCards && (
          <div className="flex flex-col gap-8">
            {showSwitch && hasProductCards && tabs.length > 1 && (
              <TabSwitch
                tabs={tabs}
                activeTab={activeTab}
                onChange={setActiveTab}
              />
            )}
            {hasProductCards && (
              <ProductCardCarousel
                onModalButtonClick={onModalButtonClick}
                renderCheckPlans={renderCheckPlans}
                fields={fields as CarouselWithProductCards}
                activeTab={activeTab}
                tabs={tabs}
              />
            )}
          </div>
        )}
        {hasTestimonialCards && (
          <TestimonialCarousel
            fields={fields as CarouselWithTestimonialCards}
            autoScroll={testimonialAutoScroll}
            autoScrollInterval={8000}
          />
        )}
      </div>
      {disclaimerText && (
        <Text
          as="div"
          className="footnote mt-8 px-4 text-center text-text-secondary"
        >
          {disclaimerText}
        </Text>
      )}
    </div>
  );
};

export default Carousel;