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

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>
          <p>Todo: Add filter component here</p>
          <pre>
            {JSON.stringify({ filterCategories, defaultFilter }, null, 2)}
          </pre>
        </details>
      )}
      <details>
        <summary>Carousel cards</summary>
        <p>Todo: Add carousel cards component here</p>
        <pre>{JSON.stringify({ cards }, null, 2)}</pre>
      </details>
    </SectionContainer>
  )
}