"use client"

import { Link, usePathname } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import Cookies from "js-cookie";

import { User2Icon } from "lucide-react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function User() {
    const t = useTranslations();
    const pathname = usePathname();

    const logOut = () => {
        Cookies.remove("MW_TOKEN");
        window.location.reload();
    };

    return (
        <DropdownMenu>
            <DropdownMenuTrigger className="bg-white size-8 text-black grid place-items-center" asChild>
                <Button size={"sm"} variant={"secondary"}>
                    <User2Icon className="size-4" />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="bg-white *:!text-black *:!outline-none" align={"end"}>
                <DropdownMenuItem asChild>
                    <div className="hover:!bg-gray-100">
                        <Link href={'/'} className="w-full">
                            {t('routes.home')}
                        </Link>
                    </div>
                </DropdownMenuItem>

                <DropdownMenuItem asChild>
                    <div className="hover:!bg-gray-100">
                        {
                            pathname.includes("profile") ?
                                <Link href={'/dashboard'} className="w-full">
                                    {t('routes.dashboard')}
                                </Link>
                                :
                                <Link href={'/dashboard/profile'} className="w-full">
                                    {t('routes.profile')}
                                </Link>
                        }
                    </div>
                </DropdownMenuItem>

                <DropdownMenuItem asChild>
                    {/* <div className="hover:!bg-gray-100">
                        <Link href={'/dashboard/settings'} className="w-full">
                            {t('routes.account-settings')}
                        </Link>
                    </div> */}
                </DropdownMenuItem>

                <DropdownMenuItem className="hover:!bg-gray-100" onClick={logOut}>
                    {t('custom.logout')}
                </DropdownMenuItem>

            </DropdownMenuContent>
        </DropdownMenu>
    )
}