"use client";
import { api } from "@/trpc/react";
import React from "react";
import { Combobox, ComboboxProps } from "../combobox";
import { Icons } from "../icons";

function CategorySelect(props: Partial<ComboboxProps>) {
  const { data: categories } = api.category.getMany.useQuery();
  return (
    <Combobox
      {...(props as ComboboxProps)}
      messageUi={{
        select: "Kategorie auswählen...",
        selectIcon: Icons.category,
        placeholder: "Kategorie suchen...",
        empty: "Keine Kategorien gefunden",
      }}
      data={
        categories?.map(({ name, slug }) => ({ label: name, value: slug })) ??
        []
      }
    />
  );
}

export default CategorySelect;
