"use client"

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

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

import useScrollShadows from "@/hooks/useScrollShadows"

import IconByCSSelect from "../Icons/IconByCSSelect"

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

interface Filter {
  identifier: string
  label: string
  iconIdentifier: 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, {
        [styles.showLeftShadow]: showLeftShadow,
        [styles.showRightShadow]: showRightShadow,
      })}
    >
      <div className={styles.container} ref={containerRef}>
        {categories.map((category) => (
          <ChipButton
            key={category.identifier}
            onPress={() => onFilterSelect(category.identifier)}
            variant="FilterRounded"
            selected={selectedFilter === category.identifier}
            className={styles.filter}
          >
            <IconByCSSelect identifier={category.iconIdentifier} />
            {category.label}
          </ChipButton>
        ))}
      </div>
    </div>
  )
}
