import { observer } from 'mobx-react-lite';

import Selector from '@/components/select/Selector';

interface SortingMenuProps {
  onSwitchSorting: (sortingType: string) => void;
}

const selections = [
  { key: 'most_relevant', name: 'Most relevant' },
  { key: 'trending', name: 'Trending now' },
  { key: 'most_recent', name: 'Most recent' },
];

const SortingMenu = observer(({ onSwitchSorting }: SortingMenuProps) => {
  return (
    <Selector
      selections={selections}
      onChange={(key: string) => {
        onSwitchSorting(selections.find((s) => s.key === key)?.key || '');
      }}
    />
  );
});

export default SortingMenu;