import * as React from "react";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useTranslation } from "react-i18next";

import { cn } from "@/lib/utils";

// Reusable select for sorting/filtering options
export default function SortingSelect({
  label = "Options",
  options = [],
  placeholder = "Select an option",
  onChange,
  value,
  className,
}) {
  const { i18n } = useTranslation();
  const isArabic = i18n.language === "ar";
  return (
    <Select
      dir={isArabic ? "rtl" : "ltr"}
      onValueChange={onChange}
      value={value}
    >
      <SelectTrigger className={cn("w-[180px]", className)}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>{label}</SelectLabel>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}