import { SearchableSelect } from '@/components/ui/searchable-select';
import React from 'react';
import { TechIcons } from '@/components/icons/TechIcons';

interface TechnologySelectorProps {
  onTechnologySelect: (value: string) => void;
  selectedTechnologies: string[];
  removeTechnology: (technology: string) => void;
}

function TechnologySelector({ onTechnologySelect, selectedTechnologies, removeTechnology }: TechnologySelectorProps) {
  const availableTechnologies = Object.entries(TechIcons).filter(([key]) => !selectedTechnologies.includes(key));

  const selectOptions = availableTechnologies.map(([key, icon]) => ({
    label: key,
    value: key,
    icon: icon,
  }));

  return (
    <div className='space-y-4'>
      <SearchableSelect
        options={selectOptions}
        value=''
        onChange={(selectedValue) => onTechnologySelect(selectedValue as string)}
        placeholder='Search technologies...'
        className='border-neutral-800 border-[1px] rounded-md'
      />

      <div>
        <h3 className='text-lg font-semibold mb-2'>Selected Technologies</h3>
        <div className='flex flex-wrap gap-2'>
          {selectedTechnologies.map((tech, index) => (
            <span
              key={index}
              className='bg-neutral-200 text-neutral-800 text-2xl p-2 rounded-md flex items-center gap-1 border border-neutral-600'
            >
              {TechIcons[tech]}
              <button
                type='button'
                className='ml-1 text-red-400 hover:text-red-300'
                onClick={() => removeTechnology(tech)}
              >
                ×
              </button>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

export default TechnologySelector;
