import {Button} from "@/components/ui/button";
import {TooltipProvider} from "@/components/ui/tooltip";
import {Separator} from "@/components/ui/separator";
import {Textarea} from "@/components/ui/textarea";
import {Label} from "@/components/ui/label";
import {Switch} from "@/components/ui/switch";
import SessionHeader from "@/app/(patients)/app/sessions/[sessionId]/_components/_session_header";
import {ScrollArea} from "@/components/ui/scroll-area";
import SessionChatBubble from "@/app/(patients)/app/sessions/[sessionId]/_components/_session_chat_bubble";


export default function SessionPage() {

    return (
        <TooltipProvider>
            <div className="flex h-[calc(100dvh_-_5rem)] flex-col">
                <SessionHeader/>
                <Separator/>

                <ScrollArea className={"flex-1"}>
                    <SessionChatBubble />
                    <SessionChatBubble />
                    <SessionChatBubble />
                    <SessionChatBubble />
                    <SessionChatBubble />
                    <SessionChatBubble />
                </ScrollArea>

                <div className="flex flex-col">
                    <Separator/>
                    <div className="p-4">
                        <form>
                            <div className="grid gap-4">
                                <Textarea
                                    className="p-4"
                                    placeholder={`Reply here...`}
                                />
                                <div className="flex items-center">
                                    <Label
                                        htmlFor="mute"
                                        className="flex items-center gap-2 text-xs font-normal"
                                    >
                                        <Switch id="mute" aria-label="Mute thread"/> Mute this thread
                                    </Label>
                                    <Button
                                        size="sm"
                                        className="ml-auto"
                                    >
                                        Send
                                    </Button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </TooltipProvider>
    )
}