import Input from "@/app/components/Input";
import Select from "@/app/components/Select";
import { type FC } from "react";
import { SORT_OPTIONS } from "../constants";

const CategoryToolbar: FC = () => {
  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
      <div className="min-w-0 flex-1">
        <Input variant="search" placeholder="جستجو..." className="rounded-xl border-[#E9EFF4]" />
      </div>

      <div className="min-w-0 w-full sm:w-auto sm:max-w-50">
        <Select options={SORT_OPTIONS} placeholder="مرتب‌سازی" className="w-full rounded-xl border-[#E9EFF4] sm:min-w-50" />
      </div>
    </div>
  );
};

export default CategoryToolbar;