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

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

function CategoriesFilter({
  selectedCategories,
  onToggleCategory,
}: CategoryFilterProps) {
  return (
    <div className="grid grid-cols-2 gap-2 max-md:hidden">
      {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:py-[0.556vw] py-2 transition-opacity outline-none",
              "hover:opacity-80"
            )}
          >
            <div
              className={clsx(
                "2xl:size-[1.111vw] size-4 rounded-full aspect-square transition-colors"
              )}
              style={{
                backgroundColor: isSelected ? color : "transparent",
                boxShadow: `0 0 0 0.069vw ${color}`,
              }}
            />
            <p
              className={clsx(
                "text-s transition-colors text-nowrap",
                isSelected ? "text-[#324D43]" : "text-[#324D43]"
              )}
            >
              {category}
            </p>
          </button>
        );
      })}
    </div>
  );
}

export default CategoriesFilter;
