import { ContentCard } from "@scandic-hotels/design-system/ContentCard"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { Carousel } from "@/components/Carousel"
import { CarouselContent } from "@/components/Carousel/CarouselContent"
import { CarouselDots } from "@/components/Carousel/CarouselDots"
import { CarouselItem } from "@/components/Carousel/CarouselItem"
import {
  CarouselNext,
  CarouselPrevious,
} from "@/components/Carousel/CarouselNavigation"

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

import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"

interface AllCampaignsProps {
  heading: string
  preamble?: string | null
  cards: {
    url: string
    heading: string
    text: string | null
    image: ImageVaultAsset
  }[]
}

export default function AllCampaigns({
  heading,
  preamble,
  cards,
}: AllCampaignsProps) {
  if (!cards.length) {
    return null
  }

  return (
    <section className={styles.allCampaignsSection}>
      <header className={styles.header}>
        <Typography variant="Title/md">
          <h3 className={styles.heading}>{heading}</h3>
        </Typography>
        {preamble ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.preamble}>{preamble}</p>
          </Typography>
        ) : null}
      </header>
      <ul className={styles.cardsList}>
        {cards.map(({ url, image, heading, text }) => (
          <li key={url} className={styles.listItem}>
            <ContentCard
              heading={heading}
              image={image}
              bodyText={text || ""}
              link={{ href: url }}
            />
          </li>
        ))}
      </ul>
      <Carousel className={styles.carousel}>
        <CarouselContent>
          {cards.map(({ url, heading, text, image }) => (
            <CarouselItem key={url}>
              <ContentCard
                heading={heading}
                image={image}
                bodyText={text || ""}
                link={{ href: url }}
              />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className={styles.navigationButton} />
        <CarouselNext className={styles.navigationButton} />
        <CarouselDots />
      </Carousel>
    </section>
  )
}