import { ArrowUpDown } from 'lucide-react'
import { cn } from '@/lib/utils'

type SortBy = 'usage_count' | 'updated_at' | 'created_at' | 'name' | 'name_desc' | 'version'

interface SortDropdownProps {
  value: SortBy
  onChange: (sortBy: SortBy) => void
  className?: string
}

const sortOptions: { value: SortBy; label: string }[] = [
  { value: 'usage_count', label: 'Most Used' },
  { value: 'updated_at', label: 'Recently Updated' },
  { value: 'created_at', label: 'Recently Created' },
  { value: 'name', label: 'Name (A-Z)' },
  { value: 'name_desc', label: 'Name (Z-A)' },
  { value: 'version', label: 'Version Number' },
]

export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
  return (
    <div className={cn('relative inline-flex items-center', className)}>
      <span className="mr-2 flex items-center gap-1.5 text-sm text-white/40">
        <ArrowUpDown className="h-4 w-4" />
        <span className="hidden sm:inline">Sort:</span>
      </span>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value as SortBy)}
        className={cn(
          'rounded-md border border-white/10 bg-black/50 px-3 py-1.5 text-sm',
          'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
        )}
      >
        {sortOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  )
}