"use client";

interface SortOrderDropdownProps {
  value: "asc" | "desc";
  onChange: (value: "asc" | "desc") => void;
}

export default function SortOrderDropdown({ value, onChange }: SortOrderDropdownProps) {
  return (
    <div className="flex items-center gap-2">
      <label htmlFor="sort-order" className="text-sm text-zinc-400">
        Order:
      </label>
      <select
        id="sort-order"
        value={value}
        onChange={(e) => onChange(e.target.value as "asc" | "desc")}
        className="rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-sm text-zinc-200 focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500"
      >
        <option value="desc">Newest first</option>
        <option value="asc">Oldest first</option>
      </select>
    </div>
  );
}