"use client"

import { useState } from "react"

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

import { Carousel } from "@/components/Carousel"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import TabFilters from "@/components/TabFilters"

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

import type { CardGalleryProps } from "@/types/components/blocks/cardGallery"

export default function CardGallery({ card_gallery }: CardGalleryProps) {
  const { heading, defaultFilter, filterCategories, cards, link } = card_gallery

  const [activeFilter, setActiveFilter] = useState(defaultFilter)

  const filteredCards = cards.filter((card) => card.filterId === activeFilter)

  return (
    <Section>
      <SectionHeader heading={heading} link={link} />
      {filterCategories.length > 0 && activeFilter && (
        <TabFilters
          categories={filterCategories}
          selectedFilter={activeFilter}
          onFilterSelect={setActiveFilter}
        />
      )}
      <ul className={styles.cardsList}>
        {filteredCards.map((card, index) => (
          <li key={`${card.heading}-${index}`}>
            <ContentCard
              heading={card.heading}
              image={card.image}
              bodyText={card.bodyText}
              promoText={card.promoText}
              link={card.link}
            />
          </li>
        ))}
      </ul>
      <Carousel className={styles.carousel}>
        <Carousel.Content>
          {filteredCards.map((card, index) => (
            <Carousel.Item key={`${card.heading}-${index}`}>
              <ContentCard
                heading={card.heading}
                image={card.image}
                bodyText={card.bodyText}
                promoText={card.promoText}
                link={card.link}
              />
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Previous className={styles.navigationButton} />
        <Carousel.Next className={styles.navigationButton} />
        <Carousel.Dots />
      </Carousel>
      <SectionLink link={link} variant="mobile" />
    </Section>
  )
}