import React from "react";
import {
  ArrowDownAZ,
  ArrowUpAz,
  CalendarArrowDown,
  CalendarArrowUp,
  FilterIcon,
  LucideIcon,
} from "lucide-react";
import { Combobox, ComboboxProps } from "./combobox";

function SortFilterSelect(props: Partial<ComboboxProps>) {
  return (
    <Combobox
      hideSearch
      messageUi={{
        selectIcon: FilterIcon,
        select: "Sortieren",
      }}
      {...(props as ComboboxProps)}
      data={sortItems}
    />
  );
}

export default SortFilterSelect;

const sortItems: Array<{
  Icon: LucideIcon;
  value: string;
  label: string;
}> = [
  { Icon: CalendarArrowUp, value: "newest", label: "Neueste" },
  { Icon: CalendarArrowDown, value: "oldest", label: "Älteste" },
  { Icon: ArrowDownAZ, value: "abc", label: "Alphabetisch A-Z" },
  { Icon: ArrowUpAz, value: "cba", label: "Alphabetisch Z-A" },
];
