import { Select } from "antd";
import { Title } from "../../../components/Title";
import { CATEGORIES } from "../../../config";
import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";

const options = Object.entries(CATEGORIES).map(([_key, value]) => {
  return {
    value,
    label: value,
  };
});

export const CategoriesSelect = ({ disabled }) => {
  const {
    filters: { categories },
    setCategories,
  } = usePendingPointsFilters();

  return (
    <div>
      <Title text={"Категории"} />

      <Select
        mode="tags"
        style={{
          width: "100%",
        }}
        placeholder="Выберите категории локаций"
        onChange={setCategories}
        options={options}
        allowClear={true}
        value={categories}
        disabled={disabled}
      />
    </div>
  );
};
