import { DESTINATIONS } from '@/lib/constants'
import type { Destination } from '@/lib/constants'

interface DestinationPickerProps {
  destination: Destination | null
  disabled: boolean
  onChange: (value: Destination) => void
}

export default function DestinationPicker({
  destination,
  disabled,
  onChange,
}: DestinationPickerProps) {
  return (
    <div className="space-y-1.5">
      <label className="block text-sm font-medium text-gray-300">Destination</label>
      <div className="grid grid-cols-3 gap-2">
        {DESTINATIONS.map((dest) => (
          <button
            key={dest.value}
            type="button"
            onClick={() => onChange(dest.value)}
            disabled={disabled}
            className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
                       disabled:opacity-50 disabled:cursor-not-allowed
                       ${destination === dest.value
                         ? 'bg-white text-[#000000] border-white'
                         : 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
                       }`}
          >
            {dest.label}
          </button>
        ))}
      </div>
    </div>
  )
}