import React from 'react';
import './ChannelList.css';

export default function ChannelList({ channels, activeChannel, onSelectChannel }) {
  // Group channels by type
  const defaultChannels = channels.filter(c => 
    ['general', 'announcements', 'dev', 'art', 'design', 'testing'].includes(c.name)
  );
  const customChannels = channels.filter(c => 
    !['general', 'announcements', 'dev', 'art', 'design', 'testing'].includes(c.name)
  );

  const renderChannel = (channel) => {
    const isActive = activeChannel?.id === channel.id;
    const hasUnread = channel.unreadCount > 0;

    // Channel icons
    const icons = {
      'general': '💬',
      'announcements': '📢',
      'dev': '💻',
      'art': '🎨',
      'design': '✏️',
      'testing': '🧪',
      'playtesting': '🎮'
    };

    const icon = icons[channel.name] || '#';

    return (
      <div
        key={channel.id}
        className={`channel-item ${isActive ? 'active' : ''} ${hasUnread ? 'unread' : ''}`}
        onClick={() => onSelectChannel(channel)}
      >
        <span className="channel-icon">{icon}</span>
        <span className="channel-name">{channel.name}</span>
        {hasUnread && (
          <span className="unread-badge">{channel.unreadCount}</span>
        )}
      </div>
    );
  };

  return (
    <div className="channel-list">
      {defaultChannels.length > 0 && (
        <div className="channel-group">
          <div className="channel-group-header">Channels</div>
          {defaultChannels.map(renderChannel)}
        </div>
      )}

      {customChannels.length > 0 && (
        <div className="channel-group">
          <div className="channel-group-header">Custom Channels</div>
          {customChannels.map(renderChannel)}
        </div>
      )}
    </div>
  );
}
