"use client";

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

interface ChatHeaderProps {
  channel: Channel;
}

export function ChatHeader({ channel }: ChatHeaderProps) {
  return (
    <div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 bg-white">
      <div className="flex items-center gap-2">
        {channel.is_private ? (
          <Lock size={18} className="text-gray-500" />
        ) : (
          <Hash size={18} className="text-gray-500" />
        )}
        <h1 className="font-bold text-gray-800">{channel.name}</h1>
      </div>
      <div className="flex items-center gap-3">
        {channel.members_count !== undefined && (
          <div className="flex items-center gap-1 text-sm text-gray-500">
            <Users size={16} />
            <span>{channel.members_count}</span>
          </div>
        )}
        {channel.description && (
          <span className="text-sm text-gray-400 hidden md:block truncate max-w-xs">
            {channel.description}
          </span>
        )}
      </div>
    </div>
  );
}