"use client"

import { Carousel } from "@/components/Carousel"

import { GetBenefitIconByCSIdentifier } from "../../utils"
import BenefitCard from "./BenefitCard"

import styles from "./benefitCards.module.css"

import type { ProfilingConsentModal as ProfilingConsentModalType } from "@scandic-hotels/trpc/types/profilingConsent"

type BenefitCardsProps = {
  cards?: ProfilingConsentModalType["cards"]
}

export default function BenefitCards({ cards }: BenefitCardsProps) {
  if (!cards?.length) return null

  return (
    <Carousel className={styles.benefitsCarousel}>
      <Carousel.Content>
        {cards.map((card, index) => {
          const Icon = GetBenefitIconByCSIdentifier(card.image_type)
          return (
            <Carousel.Item key={`${card.title}-${index}`}>
              <BenefitCard
                Icon={Icon}
                title={card.title}
                description={card.preamble}
              />
            </Carousel.Item>
          )
        })}
      </Carousel.Content>
      <Carousel.Dots className={styles.dots} />
    </Carousel>
  )
}