'use client'

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

interface RegionSelectorProps {
  value?: string
  onChange: (value: string) => void
  className?: string
}

const regions = [
  'All',
  'Africa (Sub-Saharan)',
  'Middle East & North Africa',
  'Americas',
  'Asia-Pacific',
  'Europe',
]

export function RegionSelector({ value, onChange, className }: RegionSelectorProps) {
  return (
    <Select value={value || 'All'} onValueChange={onChange}>
      <SelectTrigger className={className}>
        <SelectValue placeholder="Select region" />
      </SelectTrigger>
      <SelectContent>
        {regions.map((region) => (
          <SelectItem key={region} value={region}>
            {region}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

