import Avatar from "@/src/components/general/avatar";
import { AppContext } from "@/src/pages/_app";
import Dropdown from "@/twui/components/elements/Dropdown";
import LinkList from "@/twui/components/elements/LinkList";
import LucideIcon from "@/twui/components/elements/lucide-icon";
import Paper from "@/twui/components/elements/Paper";
import Divider from "@/twui/components/layout/Divider";
import Row from "@/twui/components/layout/Row";
import Span from "@/twui/components/layout/Span";
import { useContext } from "react";

export default function HeaderUser() {
    const { pageProps } = useContext(AppContext);
    const { user } = pageProps;

    return (
        <Dropdown
            target={
                <Row className="-my-2">
                    <Avatar
                        image_url={user.image_thumbnail}
                        title={`${user.first_name} Image`}
                    />
                    <Span>{user.first_name}</Span>
                    <LucideIcon name="ChevronDown" size={17} />
                </Row>
            }
            position="bottom-right"
        >
            <Paper className="mt-3 min-w-[200px]">
                <LinkList
                    links={[
                        {
                            title: `Dashboard`,
                            url: `/admin`,
                        },
                        {
                            title: `Settings`,
                            url: `/admin/settings`,
                        },
                        {
                            component: <Divider />,
                        },
                        {
                            title: `Logout`,
                            url: `/auth/logout`,
                        },
                    ]}
                    className="flex-col items-stretch w-full"
                />
            </Paper>
        </Dropdown>
    );
}