"use client";

import {ChevronsUpDown, ChevronUp} from "lucide-react";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {LoggedInDropdown} from "./logged-in-dropdown";
import {Account, Session, User} from "better-auth";
import {AuthProviderConfig} from "../../../../../../portabase.config";

type LoggedInButtonClientProps = {
    user: User,
    sessions: Session[],
    currentSession: Session,
    accounts: Account[],
    providers: AuthProviderConfig[]
}

export const LoggedInButtonClient = ({
                                         user,
                                         sessions,
                                         currentSession,
                                         accounts,
                                         providers
                                     }: LoggedInButtonClientProps) => {

    return (
        <LoggedInDropdown
            // @ts-ignore
            user={user}
            // @ts-ignore
            sessions={sessions}
            // @ts-ignore
            currentSession={currentSession}
            // @ts-ignore
            accounts={accounts}
            providers={providers}
        >
            <SidebarMenuButton type="button" className="h-auto  justify-between py-2" >
                <div className="flex items-center gap-2">
                    <Avatar className="size-6">
                        <AvatarFallback>{user.name[0].toUpperCase()}</AvatarFallback>
                        {user.image && <AvatarImage src={user.image}/>}
                    </Avatar>
                    <div className="flex flex-col items-start">
                        <span className="text-sm font-medium first-letter:capitalize max-w-[170px] truncate">{user.name}</span>
                        <span
                            className="text-xs text-muted-foreground max-w-[170px] truncate"
                            title={user.email}
                        >
                      {user.email}
                    </span>
                    </div>
                </div>
                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50"/>
            </SidebarMenuButton>
        </LoggedInDropdown>
    );
};