import localFont from "next/font/local";
import ConsultationList from '@/components/consultation/ConsultationList';
import NotificationBell from '@/components/notificationBell';
import '../globals.css';

const geistSans = localFont({
    src: [
        {
            path: "../../public/fonts/geist/Geist-Regular.ttf",
            weight: "400",
            style: "normal",
        },
    ],
    variable: "--font-geist-sans",
    display: "swap",
});

export const metadata = {
    title: 'Health App Chat',
    description: 'Chat with your healthcare provider',
};

export default function ChatLayout({
    children,
}) {
    return (
        <html lang="en" suppressHydrationWarning>
            <body className={geistSans.variable} suppressHydrationWarning>
                <div className="flex h-screen">

                    <div className="hidden md:block md:w-80 lg:w-96 border-r">
                        <div className="h-full flex flex-col">
                            <div className="p-4 border-b">
                                <h2 className="text-xl font-semibold">Conversations</h2>
                            </div>
                            <ConsultationList />
                        </div>
                    </div>
                    <div className="flex-1 flex flex-col">
                        <div className="flex items-center justify-between p-4 border-b">
                            <h1 className="text-2xl font-semibold">Chat</h1>
                            <NotificationBell userId={1} />
                        </div>
                        {children}
                    </div>
                </div>
            </body>
        </html>
    );
}