import ContentCard from "@/components/ContentCard"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"

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

import type { CarouselCardsProps } from "@/types/components/blocks/carouselCards"

export default function CarouselCards({ carousel_cards }: CarouselCardsProps) {
  const {
    heading,
    enableFilters,
    filterCategories,
    cards,
    defaultFilter,
    link,
  } = carousel_cards

  return (
    <SectionContainer>
      <SectionHeader title={heading} link={link} />
      {enableFilters && (
        <details>
          <summary>Filter data</summary>
          <div>
            {/* Filter component will go here */}
            <pre className={styles.code}>
              {JSON.stringify({ filterCategories, defaultFilter }, null, 2)}
            </pre>
          </div>
        </details>
      )}
      {/* Carousel functionality will go here */}
      <div className={styles.cardsContainer}>
        {cards.map((card) => (
          <ContentCard
            link={card.link}
            key={card.heading}
            heading={card.heading}
            bodyText={card.bodyText}
            image={card.image}
            promoText={card.promoText}
          />
        ))}
      </div>
    </SectionContainer>
  )
}