import { ChannelBadge } from "@ui/components/ChannelBadge";
import type { UserTablo } from "@xtablo/shared/types/tablos.types";

interface ChatHeaderProps {
  tablo: UserTablo | null;
  onToggleChannelList?: () => void;
  isChannelListExpanded?: boolean;
  onlineUsers: string[];
}

export function ChatHeader({
  tablo,
  onToggleChannelList,
  isChannelListExpanded = false,
  onlineUsers,
}: ChatHeaderProps) {
  const memberCount = onlineUsers.length;

  return (
    <div className="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-600/50 bg-white dark:bg-gray-800/40">
      {onToggleChannelList && (
        <button
          onClick={onToggleChannelList}
          className="mr-2 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          aria-label="Toggle channel list"
        >
          <svg
            className={`w-5 h-5 transition-transform duration-200 ${
              isChannelListExpanded ? "rotate-180" : ""
            }`}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </button>
      )}
      {tablo && (
        <>
          <ChannelBadge tablo={tablo} displayTitle={tablo.name} isOnline={memberCount > 0} />
          <div className="ml-3">
            <h2 className="font-semibold text-gray-900 dark:text-gray-100">{tablo.name}</h2>
            {memberCount > 0 && (
              <p className="text-xs text-gray-500 dark:text-gray-400">{memberCount} online</p>
            )}
          </div>
        </>
      )}
    </div>
  );
}
