"use client";

import { Channel } from "@/lib/api";
import { Hash, Lock, Plus } from "lucide-react";

interface ChannelListProps {
  channels: Channel[];
  selectedId?: string;
  onSelect: (channel: Channel) => void;
  onCreateChannel?: () => void;
}

export function ChannelList({ channels, selectedId, onSelect, onCreateChannel }: ChannelListProps) {
  return (
    <div className="py-2">
      <div className="px-3 py-1 flex items-center justify-between">
        <span className="text-xs font-semibold text-white/50 uppercase tracking-wide">
          Channels
        </span>
        {onCreateChannel && (
          <button
            onClick={onCreateChannel}
            className="p-0.5 rounded text-white/50 hover:text-white hover:bg-white/10 transition-colors"
            title="Create a channel"
          >
            <Plus size={16} />
          </button>
        )}
      </div>
      <ul>
        {channels.map((ch) => {
          const isActive = ch.id === selectedId;
          return (
            <li key={ch.id}>
              <button
                onClick={() => onSelect(ch)}
                className={`w-full flex items-center gap-1.5 px-3 py-1.5 text-sm text-left transition-colors ${
                  isActive
                    ? "bg-white/15 text-white font-medium"
                    : "text-white/70 hover:bg-white/5 hover:text-white"
                }`}
              >
                {ch.is_private ? (
                  <Lock size={14} className="flex-shrink-0" />
                ) : (
                  <Hash size={14} className="flex-shrink-0" />
                )}
                <span className="truncate">{ch.name}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}