// admin-spa/src/components/filters/OrderBy.tsx
import React from "react";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { __ } from "@/lib/i18n";

type Props = {
  value?: { orderby?: "date" | "id" | "modified" | "total"; order?: "asc" | "desc" };
  onChange?: (next: { orderby?: "date" | "id" | "modified" | "total"; order?: "asc" | "desc" }) => void;
};

export default function OrderBy({ value, onChange }: Props) {
  const orderby = value?.orderby ?? "date";
  const order = value?.order ?? "desc";

  return (
    <div className="flex items-center gap-2">
      <Select value={orderby} onValueChange={(v) => onChange?.({ orderby: v as any, order })}>
        <SelectTrigger className="min-w-[120px]">
          <SelectValue placeholder={__("Order by")} />
        </SelectTrigger>
        <SelectContent position="popper" className="z-[1000]">
          <SelectGroup>
            <SelectItem value="date">{__("Date")}</SelectItem>
            <SelectItem value="id">{__("ID")}</SelectItem>
            <SelectItem value="modified">{__("Modified")}</SelectItem>
            <SelectItem value="total">{__("Total")}</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

      <Select value={order} onValueChange={(v) => onChange?.({ orderby, order: v as any })}>
        <SelectTrigger className="min-w-[100px]">
          <SelectValue placeholder={__("Direction")} />
        </SelectTrigger>
        <SelectContent position="popper" className="z-[1000]">
          <SelectGroup>
            <SelectItem value="desc">{__("DESC")}</SelectItem>
            <SelectItem value="asc">{__("ASC")}</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}