'use client';
import { useState, useEffect } from 'react';
import { SearchableSelect } from './searchable-select';
import { getFilteredIcons, defaultIcons } from '@/components/icons/FaIcons';
import { cn } from '@/src/lib/utils';

interface IconPickerProps {
  value?: string;
  onChange: (value: string | null) => void;
  className?: string;
}

export function IconPicker({ value, onChange, className }: IconPickerProps) {
  const [iconSearch, setIconSearch] = useState('');
  const [filteredIcons, setFilteredIcons] = useState(defaultIcons);

  useEffect(() => {
    setFilteredIcons(getFilteredIcons(iconSearch));
  }, [iconSearch]);

  return (
    <SearchableSelect
      className={cn('border-neutral-800 border-[1px] rounded-md', className)}
      options={Object.entries(filteredIcons).map(([name, Icon]) => ({
        label: (
          <div className='flex items-center gap-2'>
            {Icon}
            {name}
          </div>
        ),
        value: name,
        icon: Icon,
      }))}
      value={value}
      onChange={(selectedValue) => onChange(selectedValue as string)}
      onSearch={(input) => setIconSearch(input)}
      isClearable
    />
  );
}
