import React from 'react';
import { useChat } from '../../providers/chat-provider';
import '../../styles/selector.css';

export function PersonSelector() {
  const [search, setSearch] = React.useState('');
  const { instance } = useChat();

  return (
    <div className="selector-container">
      <div className="selector-header">
        {instance?.logo && (
          <img src={instance.logo} className="selector-logo" alt="Logo" />
        )}
      </div>
      
      <div className="search-container">
        <svg className="search-icon" viewBox="0 0 24 24">
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="search-input"
          placeholder="Search conversations..."
        />
      </div>

      <div className="selector-list">
        {['FAQ', 'Support', 'Sales'].map((item) => (
          <div key={item} className="selector-item">
            <div className="selector-avatar">
              <span>{item[0]}</span>
            </div>
            <div className="item-content">
              <h3 className="item-title">{item}</h3>
              <p className="item-subtitle">Start a conversation</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}