import React from "react";

export default function ChannelSidebar() {
  return (
    <div className="channel-sidebar w-72 bg-[#0f0f0f] border-r border-[#1a1a1a] flex flex-col">
      {/* Server Header */}
      <div className="server-header p-4 border-b border-[#1a1a1a] font-bold text-base flex items-center justify-between">
        <span>AeThex Foundation</span>
        <span className="server-badge foundation text-xs px-2 py-1 rounded bg-red-900/20 text-red-500 border border-red-500 uppercase tracking-wider">Official</span>
      </div>
      {/* Channel List */}
      <div className="channel-list flex-1 overflow-y-auto py-2">
        <div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Announcements</div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">📢</span>
          <span className="channel-name flex-1">updates</span>
          <span className="channel-badge text-xs bg-red-600 text-white px-2 rounded-full">3</span>
        </div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">📜</span>
          <span className="channel-name flex-1">changelog</span>
        </div>
        <div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Development</div>
        <div className="channel-item active flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm bg-[#1a1a1a]">
          <span className="channel-icon">#</span>
          <span className="channel-name flex-1">general</span>
        </div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">#</span>
          <span className="channel-name flex-1">api-discussion</span>
        </div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">#</span>
          <span className="channel-name flex-1">passport-development</span>
        </div>
        <div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Support</div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">❓</span>
          <span className="channel-name flex-1">help</span>
        </div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">🐛</span>
          <span className="channel-name flex-1">bug-reports</span>
        </div>
        <div className="channel-category px-4 pt-4 pb-2 text-xs uppercase tracking-widest text-gray-500 font-bold">Voice Channels</div>
        <div className="channel-item flex items-center gap-2 px-4 py-2 mx-2 rounded cursor-pointer text-sm hover:bg-[#1a1a1a]">
          <span className="channel-icon">🔊</span>
          <span className="channel-name flex-1">Nexus Lounge</span>
          <span className="text-gray-500 text-xs">3</span>
        </div>
      </div>
      {/* User Presence */}
      <div className="user-presence p-3 border-t border-[#1a1a1a] flex items-center gap-3 text-sm">
        <div className="user-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold bg-gradient-to-tr from-red-600 via-blue-600 to-orange-400">A</div>
        <div className="user-info flex-1">
          <div className="user-name font-bold mb-0.5">Anderson</div>
          <div className="user-status flex items-center gap-1 text-xs text-gray-500">
            <span className="status-dot w-2 h-2 rounded-full bg-green-400 shadow-green-400/50 shadow" />
            <span>Building AeThex</span>
          </div>
        </div>
      </div>
    </div>
  );
}
