'use client';
import { Link } from '@/shared/config/i18n/navigation';
import { Button } from '@/shared/ui/button';
import { useUserLogin } from '@/shared/zustand/userLogin';
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from '@/shared/ui/navigation-menu';
import SubMenuLink from './SubMenuLink';
import { ChangeLang } from './ChangeLang';
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';

function AuthButtons() {
  const auth = {
    login: { title: 'Login', url: '#' },
    signup: { title: 'Sign up', url: '#' },
  };

  const userItem = [
    { title: 'Profile', url: '/profile' },
    { title: 'Logout', url: '#' },
  ];

  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
  const toggleRegisterModal = useRegisterModal(
    (state) => state.toggleRegisterModal,
  );
  const user = useUserLogin((state) => state.user);

  if (user) {
    return (
      <NavigationMenuItem>
        <NavigationMenuTrigger>{user.name}</NavigationMenuTrigger>
        <NavigationMenuContent className="bg-popover text-popover-foreground">
          {userItem.map((subItem) => (
            <NavigationMenuLink asChild key={subItem.title} className="w-80">
              <SubMenuLink item={subItem} />
            </NavigationMenuLink>
          ))}
        </NavigationMenuContent>
      </NavigationMenuItem>
    );
  }

  return (
    <div className="flex lg:flex-row flex-col gap-3">
      <div className="lg:flex hidden">
        <ChangeLang />
      </div>
      <Button variant="outline" onClick={() => toggleLoginModal()}>
        <Link href={auth.login.url}>{auth.login.title}</Link>
      </Button>
      <Button onClick={() => toggleRegisterModal()}>
        <Link href={auth.signup.url}>{auth.signup.title}</Link>
      </Button>
    </div>
  );
}

export { AuthButtons };