// @design-system: domain/SortDropdown
// Registered at /design-system#sort-dropdown

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select/Select';
import { dirForLocale } from '@/lib/i18n';
import { type BrowseSort } from '@/lib/enums/search-sort';

/** @deprecated use BrowseSort from @/lib/enums/search-sort */
export type SortKey = BrowseSort;

interface SortOption {
  key: BrowseSort;
  label: string;
}

interface Props {
  value: BrowseSort;
  onChange: (next: BrowseSort) => void;
  label: string;
  options: SortOption[];
  locale?: 'he' | 'en';
}

/**
 * SortDropdown — controlled sort selector for /deals/all.
 * Parent owns value and applies URL/state updates via onChange; this component
 * has no URL or history side effects.
 */
export function SortDropdown({ value, onChange, label, options, locale = 'he' }: Props) {
  const dir = dirForLocale(locale);

  return (
    <Select value={value} onValueChange={(next) => onChange(next as BrowseSort)} dir={dir}>
      <SelectTrigger
        aria-label={label}
        className="h-9 w-auto min-w-[7rem] justify-start gap-2 text-sm font-medium"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {options.map((o) => (
          <SelectItem key={o.key} value={o.key}>
            {o.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}