'use client';

import NavItem from '../navItem/NavItem';
import {
  AppShellSection,
  AppShellNavbar,
  ScrollArea,
  Stack,
  Group,
  Anchor,
  Image,
  Box,
  Badge,
  Text,
} from '@mantine/core';
import { MdOutlineEmojiNature } from 'react-icons/md';
import SembleLogo from '@/assets/semble-logo.svg';
import NavbarToggle from '../NavbarToggle';
import { BiRightArrowAlt, BiSearch } from 'react-icons/bi';
import { LinkButton } from '@/components/link/MantineLink';

export default function GuestNavbar() {
  return (
    <AppShellNavbar p={'xs'} style={{ zIndex: 3 }}>
      <Group justify="space-between">
        <Anchor href={'/home'} mx={2}>
          <Stack align="center" gap={6}>
            <Image src={SembleLogo.src} alt="Semble logo" w={20.84} h={28} />
            <Badge size="xs">Alpha</Badge>
          </Stack>
        </Anchor>
        <Box hiddenFrom="xs">
          <NavbarToggle />
        </Box>
      </Group>

      <AppShellSection grow component={ScrollArea}>
        <Stack mt={'md'}>
          <Stack>
            <Text fw={600} fz={'xl'}>
              A social knowledge network for research
            </Text>
            <Group gap={'xs'}>
              <LinkButton href="/signup">Sign up</LinkButton>
              <LinkButton
                href="/login"
                color="var(--mantine-color-dark-filled)"
                rightSection={<BiRightArrowAlt size={22} />}
              >
                Log in
              </LinkButton>
            </Group>

            <Stack gap={5} mt={'md'}>
              <NavItem
                href="/explore"
                label="Explore"
                icon={<MdOutlineEmojiNature size={25} />}
              />

              <NavItem
                href="/search"
                label="Search"
                icon={<BiSearch size={25} />}
              />
            </Stack>
          </Stack>
        </Stack>
      </AppShellSection>
    </AppShellNavbar>
  );
}
