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

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

export const CategoriesSelect = ({ disabled }) => {
  const { filters, setCategories } = useFilters();

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

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