import { ChevronDown } from 'lucide-react';

const CustomSelect = ({ 
  name, 
  value, 
  onChange, 
  options, 
  placeholder, 
  Icon,
  error = '',
  className = ''
}) => {
  return (
    <div className={`relative ${className}`}>
      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 z-10">
        <Icon className="w-5 h-5" />
      </div>
      <select
        name={name}
        value={value}
        onChange={onChange}
        className={`w-full pl-12 pr-12 py-4 bg-white border-2 ${error ? 'border-red-300' : 'border-gray-200'} rounded-2xl focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent appearance-none cursor-pointer text-gray-700`}
        style={{ 
          WebkitAppearance: 'none',
          MozAppearance: 'none',
        }}
      >
        <option value="" disabled>{placeholder}</option>
        {options.map((option, index) => (
          <option key={index} value={option}>{option}</option>
        ))}
      </select>
      <div className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
        <ChevronDown className="w-5 h-5" />
      </div>
      {error && (
        <p className="text-red-500 text-sm mt-2 pl-4">{error}</p>
      )}
    </div>
  );
};

export default CustomSelect;