type SortOption = 'newest' | 'oldest' | 'title'

interface SortDropdownProps {
  sortBy: SortOption
  onSortChange: (value: SortOption) => void
}

export function SortDropdown({ sortBy, onSortChange }: SortDropdownProps) {
  return (
    <select
      value={sortBy}
      onChange={e => onSortChange(e.target.value as SortOption)}
      className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer"
    >
      <option
        value="newest"
        className="bg-zinc-900 text-zinc-100"
        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
      >
        NEWEST FIRST
      </option>
      <option
        value="oldest"
        className="bg-zinc-900 text-zinc-100"
        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
      >
        OLDEST FIRST
      </option>
      <option
        value="title"
        className="bg-zinc-900 text-zinc-100"
        style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}
      >
        BY TITLE
      </option>
    </select>
  )
}