import { Sort } from "iconsax-reactjs";
import { type FC } from "react";
import { SORT_OPTIONS } from "../constants";

const CategoryToolbar: FC = () => {
  return (
    <div className="flex items-center justify-start">
      <div className="relative w-37">
        <select defaultValue="bestseller" aria-label="مرتب‌سازی" className="h-10 w-full appearance-none rounded-xl border border-[#E9EFF4] bg-white px-3 pr-10 text-right text-sm text-[#5B6A74]">
          {SORT_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        <Sort aria-hidden className="pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-primary" color="currentColor" size={18} />
      </div>
    </div>
  );
};

export default CategoryToolbar;