/**
 * Shared sort dropdown styled for the dark theme.
 */

export interface SortOption {
  value: string;
  label: string;
}

interface SortDropdownProps {
  options: SortOption[];
  value: string;
  onChange: (value: string) => void;
  className?: string;
}

export default function SortDropdown({
  options,
  value,
  onChange,
  className,
}: SortDropdownProps) {
  return (
    <div className={`sort-dropdown${className ? ` ${className}` : ""}`}>
      <label className="sort-dropdown__label" htmlFor="sort-select">
        Sort by
      </label>
      <select
        id="sort-select"
        className="sort-dropdown__select"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
}
