web/components/Blocks/CarouselCards/index.tsx

"use client"

import { useState } from "react"

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

import Filters from "./Filters"

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

  const [activeFilter, setActiveFilter] = useState(
    enableFilters ? defaultFilter : null
  )

  const filteredCards = !activeFilter
    ? cards
    : cards.filter(
        (card) => "filterId" in card && card.filterId === activeFilter
      )

  return (
    <SectionContainer>
      <SectionHeader title={heading} link={link} />
      {filterCategories.length > 0 && activeFilter && (
        <Filters
          categories={filterCategories}
          selectedFilter={activeFilter}
          onFilterSelect={setActiveFilter}
        />
      )}
      {/* Carousel functionality will go here */}
      <div className={styles.cardsContainer}>
        {filteredCards.map((card) => (
          <ContentCard
            key={card.heading}
            heading={card.heading}
            image={card.image}
            bodyText={card.bodyText}
            promoText={card.promoText}
            link={card.link}
          />
        ))}
      </div>
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}