import {CalendarClock, ChevronLeft, Contact, EllipsisVertical, Info} from "lucide-react";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {Button} from "@/components/ui/button";
import {DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem} from "@/components/ui/dropdown-menu";
import Link from "next/link";
import {SESSIONS_URL} from "@/lib/constants";

type SessionChatHeaderProps = {}

export default function SessionChatHeader(props: SessionChatHeaderProps) {
    // todo: missing props and props render + function call
    return (
        <div className={"w-full border-b sticky z-[50] top-0 backdrop-blur-xl"}>

            <div className="flex h-14 items-center justify-between px-2 lg:px-4 mx-auto">
                <div className={"flex items-center gap-2 h-full"}>
                    <Link href={SESSIONS_URL} className={"block md:hidden"}>
                        <ChevronLeft size={28}/>
                    </Link>
                    <div className={"flex gap-2 items-center pl-2 md:pl-0 border-l md:border-none"}>
                        <Avatar>
                            <AvatarImage src="https://github.com/shadcn.png"/>
                            <AvatarFallback>LD</AvatarFallback>
                        </Avatar>
                        <div>
                            <h1 className={"font-semibold text-base md:text-lg text-gray-800"}>Lindelwa Dlamini</h1>
                            <p className={"text-xs uppercase text-gray-600"}>Patient</p>
                        </div>
                    </div>
                </div>


                <div className={"flex items-center gap-2"}>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline" size={"icon"} className={"outline-none"}>
                                <EllipsisVertical/>
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent className="w-56">
                            <DropdownMenuItem className={"gap-2 cursor-pointer"}>
                                <Info size={16}/>
                                Profile
                            </DropdownMenuItem>
                            <DropdownMenuItem className={"gap-2 cursor-pointer"}>
                                <CalendarClock size={16}/>
                                Schedule Appointment
                            </DropdownMenuItem>
                            <DropdownMenuItem className={"gap-2 cursor-pointer"}>
                                <Contact size={16}/>
                                Contact Information
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>

            </div>

        </div>
    )
}