'use client';

import { useTranslations } from 'next-intl';

interface SortDropdownProps {
  value: string | null;
  onChange: (value: string | null) => void;
}

export function SortDropdown({ value, onChange }: SortDropdownProps) {
  const t = useTranslations('search');

  return (
    <select
      value={value ?? ''}
      onChange={(e) => onChange(e.target.value || null)}
      className="input text-sm"
      aria-label={t('sort_by')}
    >
      <option value="">{t('sort_relevance')}</option>
      <option value="newest">{t('sort_newest')}</option>
      <option value="price_asc">{t('sort_price_asc')}</option>
      <option value="price_desc">{t('sort_price_desc')}</option>
      <option value="rating_desc">{t('sort_rating')}</option>
    </select>
  );
}