import React from "react";
import { InformationCard } from "@arc-ui/components/InformationCard";
import { TypographyCard } from "@arc-ui/components/TypographyCard";
import { Carousel } from "@arc-ui/components/Carousel";
import { type BentoGridContent } from "../types/types";
import { renderCard } from "./renderCard";
import styles from "../BusinessSegmentSwitcher.module.css";

/**
 * Renders a responsive carousel containing the bento grid cards for mobile and tablet viewports.
 */
export const renderBusinessSegmentSwitcherCarousel = ({
  content,
  label,
}: {
  content: BentoGridContent;
  label: string;
}) => {
  return (
    <Carousel
      overflow="visible"
      behavior="adaptive"
      responsive={{
        xs: { itemsPerSlide: 1 },
        s: { itemsPerSlide: 2 },
      }}
    >
      <div className={styles.cardWrapper}>{renderCard(content.card1)}</div>

      <div className={styles.cardWrapper}>{renderCard(content.card2)}</div>
      {content.card3 && (
        <div className={styles.cardWrapper}>
          <InformationCard {...content.card3} />
        </div>
      )}
      <div className={styles.cardWrapper}>
        <TypographyCard
          heading={`All ${label} solutions`}
          label={content.card4.label}
          url={content.card4.url}
        />
      </div>
    </Carousel>
  );
};