"use client";

import React from "react";
import styles from "./GalleryFilter.module.css";

export interface MountainFilterOption {
  id: string;
  name: string;
}

interface GalleryFilterProps {
  mountains: MountainFilterOption[];
  selectedId: string;
  onSelect: (id: string) => void;
}

export default function GalleryFilter({
  mountains,
  selectedId,
  onSelect,
}: GalleryFilterProps) {
  // If no mountains or only 1 mountain, we can still show [Semua] and the mountain name
  return (
    <nav className={styles.filterWrapper} aria-label="Filter Gunung">
      <div className={styles.filterTrack} role="tablist">
        <button
          type="button"
          role="tab"
          aria-selected={selectedId === "all"}
          className={`${styles.filterBtn} ${selectedId === "all" ? styles.active : ""}`}
          onClick={() => onSelect("all")}
        >
          Semua
        </button>

        {mountains.map((mountain) => {
          const isSelected = selectedId === mountain.id;
          // Clean display name: e.g. "Gunung Prau (Verifikasi Galeri)" -> "Prau" or display clean name
          const shortName = mountain.name
            .replace(/^Gunung\s+/i, "")
            .replace(/\s*\(.*\)$/, "")
            .trim();

          return (
            <button
              key={mountain.id}
              type="button"
              role="tab"
              aria-selected={isSelected}
              className={`${styles.filterBtn} ${isSelected ? styles.active : ""}`}
              onClick={() => onSelect(mountain.id)}
            >
              {shortName || mountain.name}
            </button>
          );
        })}
      </div>
    </nav>
  );
}