"use client"

import { cx } from "class-variance-authority"

import { HeartIcon } from "@/components/Icons"
import useScrollShadows from "@/hooks/useScrollShadows"

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

import type { CardGalleryFilter } from "@/types/enums/cardGallery"
import type { CarouselCardFilter } from "@/types/enums/carouselCards"

interface Filter {
  identifier: CarouselCardFilter | CardGalleryFilter
  label: string
}

interface TabFiltersProps {
  categories: Array<Filter>
  selectedFilter: Filter["identifier"]
  onFilterSelect: (filter: Filter["identifier"]) => void
}

export default function TabFilters({
  categories,
  selectedFilter,
  onFilterSelect,
}: TabFiltersProps) {
  const { containerRef, showLeftShadow, showRightShadow } =
    useScrollShadows<HTMLDivElement>()

  return (
    <div
      className={cx(
        styles.containerWrapper,
        showLeftShadow && styles.showLeftShadow,
        showRightShadow && styles.showRightShadow
      )}
    >
      <div className={styles.container} ref={containerRef}>
        {categories.map((category) => (
          <button
            key={category.identifier}
            onClick={() => onFilterSelect(category.identifier)}
            className={
              selectedFilter === category.identifier
                ? styles.filterSelected
                : styles.filter
            }
            type="button"
          >
            <HeartIcon
              color={selectedFilter === category.identifier ? "white" : "black"}
            />
            {category.label}
          </button>
        ))}
      </div>
    </div>
  )
}