Select

<!-- Standard Select -->
<div class="lyd-select">
    <button class="lyd-select-trigger" >
        <span>Choose an option</span>
        <svg class="lyd-select-icon" width="20" height="20" viewBox="0 0 24 24">
            <path d="M6 9l6 6 6-6" />
        </svg>
    </button>
    <div class="lyd-select-dropdown">
        <div class="lyd-select-option">Option 1</div>
        <div class="lyd-select-option">Option 2</div>
        <div class="lyd-select-option">Option 3</div>
    </div>
</div>

<!-- Select with Search -->
<div class="lyd-select">
    <button class="lyd-select-trigger">
        <span>Select item</span>
        <svg class="lyd-select-icon">...</svg>
    </button>
    <div class="lyd-select-dropdown">
        <div class="lyd-select-search">
            <input type="text" placeholder="Search...">
        </div>
        <div class="lyd-select-option">Item 1</div>
        <div class="lyd-select-option">Item 2</div>
    </div>
</div>

// Toggle dropdown
function toggleSelect(trigger) {
    const dropdown = trigger.nextElementSibling;
    const isOpen = trigger.classList.contains('active');
    
    // Close all other dropdowns
    document.querySelectorAll('.lyd-select-trigger').forEach(t => {
        t.classList.remove('active');
        t.nextElementSibling.classList.remove('show');
    });
    
    if (!isOpen) {
        trigger.classList.add('active');
        dropdown.classList.add('show');
    }
}

// Select option
function selectOption(option, value) {
    if (option.classList.contains('disabled')) return;
    
    const select = option.closest('.lyd-select');
    const trigger = select.querySelector('.lyd-select-trigger span');
    const dropdown = select.querySelector('.lyd-select-dropdown');
    
    // Update selected state
    dropdown.querySelectorAll('.lyd-select-option').forEach(opt => {
        opt.classList.remove('selected');
    });
    option.classList.add('selected');
    
    // Update trigger text
    trigger.textContent = value;
    
    // Close dropdown
    select.querySelector('.lyd-select-trigger').classList.remove('active');
    dropdown.classList.remove('show');
}

// Filter options
function filterOptions(input) {
    const filter = input.value.toLowerCase();
    const options = input.closest('.lyd-select-dropdown')
        .querySelectorAll('.lyd-select-option');
    
    options.forEach(option => {
        const text = option.textContent.toLowerCase();
        option.style.display = text.includes(filter) ? '' : 'none';
    });
}

// Close on outside click
document.addEventListener('click', (e) => {
    if (!e.target.closest('.lyd-select')) {
        document.querySelectorAll('.lyd-select-trigger').forEach(trigger => {
            trigger.classList.remove('active');
            trigger.nextElementSibling.classList.remove('show');
        });
    }
});

// components/Select.tsx
import { useState, useRef, useEffect } from 'react';

interface Option {
  value: string;
  label: string;
  disabled?: boolean;
}

interface SelectProps {
  options: Option[];
  placeholder?: string;
  searchable?: boolean;
  size?: 'small' | 'medium' | 'large';
  value?: string;
  onChange?: (value: string) => void;
}

export const Select = ({
  options,
  placeholder = 'Select an option',
  searchable = false,
  size = 'medium',
  value,
  onChange
}: SelectProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState(value);
  const selectRef = useRef<HTMLDivElement>(null);

  const filteredOptions = searchable
    ? options.filter(opt => 
        opt.label.toLowerCase().includes(search.toLowerCase())
      )
    : options;
  
  const handleSelect = (option: Option) => {
    if (option.disabled) return;
    setSelected(option.value);
      setIsOpen(false);
    setSearch('');
    onChange?.(option.value);
  };
  
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (selectRef.current && !selectRef.current.contains(e.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

      return (
    <div ref={selectRef} className={`lyd-select ${size}`}>
      <button
        className={`lyd-select-trigger ${isOpen ? 'active' : ''}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        <span>
          {selected
            ? options.find(o => o.value === selected)?.label
            : placeholder}
        </span>
        <svg className="lyd-select-icon" width="20" height="20">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      
      <div className={`lyd-select-dropdown ${isOpen ? 'show' : ''}`}>
        {searchable && (
          <div className="lyd-select-search">
          <input
            type="text"
              placeholder="Search..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
          />
          </div>
        )}
        
        {filteredOptions.map(option => (
              <div
                key={option.value}
            className={`lyd-select-option ${
              option.disabled ? 'disabled' : ''
            } ${selected === option.value ? 'selected' : ''}`}
            onClick={() => handleSelect(option)}
          >
            {option.label}
                </div>
        ))}
              </div>
    </div>
  );
};