import { Phone, ChevronDown } from 'lucide-react';

const PhoneInput = ({ 
  phoneCodeOptions,
  selectedPhoneCode,
  onPhoneCodeChange,
  phoneNumber,
  onPhoneNumberChange,
  getDisplayPhoneNumber,
  error
}) => {
  return (
    <div className="relative">
      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
        <Phone className="w-5 h-5" />
      </div>
      <div className={`flex items-center bg-white border-2 ${error ? 'border-red-300' : 'border-gray-200'} rounded-2xl focus-within:ring-2 focus-within:ring-teal-500 focus-within:border-transparent overflow-hidden`}>
        {/* Country Code Selector */}
        <div className="relative flex-shrink-0">
          <select
            name="phone_code"
            value={selectedPhoneCode}
            onChange={onPhoneCodeChange}
            className="pl-10 pr-8 py-4 bg-transparent text-sm text-gray-700 focus:outline-none appearance-none cursor-pointer border-r border-gray-200"
            style={{ 
              WebkitAppearance: 'none',
              MozAppearance: 'none',
            }}
          >
            {phoneCodeOptions.map((option, id) => (
              <option key={id} value={option.value}>
                +{option.value}
              </option>
            ))}
          </select>
          <div className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
            <ChevronDown className="w-4 h-4" />
          </div>
        </div>
        
        {/* Phone Number Input */}
        <div className="flex-grow">
          <input
            type="tel"
            placeholder="Phone Number"
            value={getDisplayPhoneNumber()}
            onChange={onPhoneNumberChange}
            className="w-full pl-3 pr-4 py-4 bg-transparent border-0 focus:outline-none text-gray-700"
            required
          />
        </div>
      </div>
      {error && (
        <p className="text-red-500 text-sm mt-2 pl-4">{error}</p>
      )}
    </div>
  );
};

export default PhoneInput;