"use client"

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

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

import useScrollShadows from "@/hooks/useScrollShadows"

import FilterIcon from "./FilterIcon"

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,
        showLeftShadow && styles.showLeftShadow,
        showRightShadow && styles.showRightShadow
      )}
    >
      <div className={styles.container} ref={containerRef}>
        {categories.map((category) => (
          <Typography
            key={category.identifier}
            variant="Body/Supporting text (caption)/smRegular"
          >
            <button
              onClick={() => onFilterSelect(category.identifier)}
              className={cx(styles.filter, {
                [styles.selected]: selectedFilter === category.identifier,
              })}
              type="button"
            >
              <FilterIcon identifier={category.iconIdentifier} />
              {category.label}
            </button>
          </Typography>
        ))}
      </div>
    </div>
  )
}
