import clsx from "clsx";
import { categories } from "../../consts/surroundingPoints";

interface CategoryFilterProps {
  selectedCategories: Set<string>;
  onToggleCategory: (category: string) => void;
}

function CategoryFilter({
  selectedCategories,
  onToggleCategory,
}: CategoryFilterProps) {
  return (
    <div className="flex flex-wrap 2xl:gap-[0.556vw] gap-2">
      {Array.from(categories.entries()).map(([category, color]) => {
        const isSelected = selectedCategories.has(category);
        return (
          <button
            key={category}
            onClick={() => onToggleCategory(category)}
            className={clsx(
              "flex items-center 2xl:gap-[0.556vw] gap-2 2xl:px-0 px-0 2xl:py-[0.556vw] py-2 transition-colors",
              "hover:opacity-80"
            )}
          >
            <div
              className={clsx(
                "2xl:size-4 size-4 rounded-full border-2 transition-colors",
                isSelected ? "border-transparent" : "border-[#E2DCCF]"
              )}
              style={{
                backgroundColor: isSelected ? color : "transparent",
              }}
            />
            <p
              className={clsx(
                "text-s [font-family:Poppins] font-normal transition-colors",
                isSelected ? "text-[#324D43]" : "text-[#324D43]"
              )}
            >
              {category}
            </p>
          </button>
        );
      })}
    </div>
  );
}

export default CategoryFilter;
