import React from 'react';
import { Card, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { MessageCircle, Wifi, WifiOff, Users, Settings, Hash } from 'lucide-react';
import type { ChatStats } from '@/types';

interface ChatInterfaceHeaderProps {
  room: string;
  isConnected: boolean;
  chatStats: ChatStats | null;
}

export function ChatInterfaceHeader({
  room,
  isConnected,
  chatStats,
}: ChatInterfaceHeaderProps) {
  return (
    <Card className="rounded-b-none border-b">
      <CardHeader className="py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <MessageCircle className="h-5 w-5" />
              <CardTitle className="text-lg">
                <Hash className="h-4 w-4 inline mr-1" />
                {room}
              </CardTitle>
            </div>
            <Badge variant={isConnected ? 'default' : 'error'}>
              {isConnected ? (
                <>
                  <Wifi className="h-3 w-3 mr-1" />
                  Connecté
                </>
              ) : (
                <>
                  <WifiOff className="h-3 w-3 mr-1" />
                  Déconnecté
                </>
              )}
            </Badge>
          </div>
          <div className="flex items-center space-x-2">
            {chatStats && (
              <div className="flex items-center space-x-4 text-sm text-muted-foreground mr-2">
                <div className="flex items-center space-x-1">
                  <Users className="h-4 w-4" />
                  <span>{chatStats.active_users ?? 0}</span>
                </div>
                <div className="flex items-center space-x-1">
                  <MessageCircle className="h-4 w-4" />
                  <span>{chatStats.total_messages ?? 0}</span>
                </div>
              </div>
            )}
            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </CardHeader>
    </Card>
  );
}