"use client";

import {
  EXPLORE_FILTERS,
  ExploreFilterId,
} from "@/constants/exploreFilters";

type ExploreFilterBarProps = {
  activeFilter: ExploreFilterId;
  onFilterChange: (filter: ExploreFilterId) => void;
  loadingLocation?: boolean;
};

export default function ExploreFilterBar({
  activeFilter,
  onFilterChange,
  loadingLocation = false,
}: ExploreFilterBarProps) {
  return (
    <div className="sticky top-0 z-20 -mx-2 mb-3 bg-background/95 px-2 pb-2 pt-1 backdrop-blur-sm">
      <div className="flex gap-2 overflow-x-auto pb-1 scrollbar-none">
        {EXPLORE_FILTERS.map((item) => {
          const isActive = activeFilter === item.id;
          const isNearMeLoading = item.id === "near_me" && loadingLocation;

          return (
            <button
              key={item.id}
              type="button"
              disabled={isNearMeLoading}
              onClick={() => onFilterChange(item.id)}
              className="shrink-0 rounded-full border px-4 py-1.5 text-xs font-medium transition-colors disabled:opacity-60"
              style={{
                borderColor: item.color,
                backgroundColor: isActive ? item.color : "transparent",
                color: isActive ? "#fff" : undefined,
              }}
            >
              {isNearMeLoading ? "در حال دریافت موقعیت..." : item.label}
            </button>
          );
        })}
      </div>
    </div>
  );
}
