import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Info, Phone, Video } from 'lucide-react';
import { toast } from 'sonner';

interface ChatHeaderProps {
    name: string;
    avatar?: string;
    memberCount?: number;
    onlineCount?: number;
    onBack?: () => void;
    onInfoClick?: () => void;
}

export function ChatHeader({ name, avatar, memberCount, onlineCount, onBack, onInfoClick }: ChatHeaderProps) {
    return (
        <div className="flex h-16 items-center justify-between border-b border-border bg-card px-4 md:px-6">
            <div className="flex items-center gap-3">
                {onBack && (
                    <Button size="icon" variant="ghost" className="h-9 w-9 md:hidden" onClick={onBack}>
                        <ArrowLeft className="h-5 w-5" />
                    </Button>
                )}
                <Avatar className="h-11 w-11">
                    <AvatarImage src={avatar || '/placeholder.svg'} alt={name} />
                    <AvatarFallback className="bg-red-500 text-white">{name.slice(0, 2).toUpperCase()}</AvatarFallback>
                </Avatar>
                <div>
                    <h2 className="text-base font-semibold">{name}</h2>
                    {memberCount && (
                        <p className="text-sm text-text-gray">
                            {memberCount} members, <span className="text-text-gray">{onlineCount} online</span>
                        </p>
                    )}
                </div>
            </div>

            <div className="flex items-center gap-2">
                <Button
                    size="icon"
                    variant="ghost"
                    className="hidden h-9 w-9 rounded-full bg-accent md:flex"
                    onClick={() => {
                        toast.warning('The video call feature is coming soon...', { duration: 2000 });
                    }}
                >
                    <Video className="h-5 w-5" />
                </Button>
                <Button
                    size="icon"
                    variant="ghost"
                    className="hidden h-9 w-9 rounded-full bg-accent md:flex"
                    onClick={() => {
                        toast.warning('The audio call feature is coming soon...', { duration: 2000 });
                    }}
                >
                    <Phone className="h-5 w-5" />
                </Button>

                <Button size="icon" variant="ghost" className="h-9 w-9 rounded-full bg-accent" onClick={onInfoClick}>
                    <Info className="h-5 w-5" />
                </Button>
            </div>
        </div>
    );
}