src/components/chat/chat-topbar.tsx

import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
import { Chat } from '@/lib/types';
import { cn } from '@/lib/utils';
import { Button } from '../ui/button';
import { Info, Phone, Video, ChevronLeft } from 'lucide-react';

interface ChatTopbarProps {
  selectedChat: Chat;
  onBack?: () => void;
}

export function ChatTopbar({ selectedChat, onBack }: ChatTopbarProps) {
  const otherUser = selectedChat.users[1];
  const chatName = selectedChat.isGroup ? selectedChat.name : otherUser?.name;
  const chatAvatar = selectedChat.isGroup
    ? `https://picsum.photos/seed/${selectedChat.id}/100/100`
    : otherUser?.avatar;

  return (
    <div className="flex h-16 items-center justify-between border-b p-4">
      <div className="flex items-center gap-3">
        {onBack && (
          <Button variant="ghost" size="icon" onClick={onBack}>
            <ChevronLeft className="h-5 w-5" />
          </Button>
        )}
        <Avatar className="h-10 w-10 border">
          <AvatarImage
            src={chatAvatar}
            alt={chatName}
            className="h-full w-full object-cover"
          />
          <AvatarFallback>{chatName?.charAt(0)}</AvatarFallback>
        </Avatar>
        <div className="flex flex-col">
          <span className="font-semibold">{chatName}</span>
          <div className="flex items-center gap-1 text-xs text-muted-foreground">
            {selectedChat.isGroup ? (
              <span>{selectedChat.users.length} members</span>
            ) : (
                otherUser?.online && (
                <>
                  <span className="h-2 w-2 rounded-full bg-green-500"></span>
                  <span>Online</span>
                </>
              )
            )}
          </div>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon">
          <Phone className="h-5 w-5" />
          <span className="sr-only">Voice call</span>
        </Button>
        <Button variant="ghost" size="icon">
          <Video className="h-5 w-5" />
          <span className="sr-only">Video call</span>
        </Button>
        <Button variant="ghost" size="icon">
          <Info className="h-5 w-5" />
          <span className="sr-only">Conversation details</span>
        </Button>
      </div>
    </div>
  );
}