---
const navigationItems = [
  { name: "Home", url: "/" },
  { name: "Blog", url: "/blog/" },
  { name: "Projects", url: "/projects/" },
];

const socialIcons = [
  {
    name: "GitHub",
    url: "https://github.com/renatomce",
    icon: "i-uil-github",
  },
  {
    name: "Linkedin",
    url: "https://www.linkedin.com/in/renatomce",
    icon: "i-uil-linkedin",
  },
  { name: "RSS", url: "/feed.xml", icon: "i-uil-rss" },
];

interface Props {
  pageTitle?: string;
}

const { pageTitle } = Astro.props;
---

<header class='border-b-4 border-black flex justify-between p-6 items-center'>
  {pageTitle && <h1 class='hidden'>{pageTitle}</h1>}
  <a href='/' title='Back to Home'>
    <p class='righteous md:text-5xl'>Renato Cervati</p>
  </a>
  <nav class='hidden md:inline-block'>
    <h2 class='hidden'>Navigation</h2>
    <ul class='flex gap-8 poppins'>
      {
        navigationItems.map((item) => (
          <li>
            <a
              class='text-lg font-medium hover:text-green hover:underline transition-all duration-150 ease-in-out'
              href={item.url}
              title={`Go to ${item.name}`}
            >
              {item.name}
            </a>
          </li>
        ))
      }
      {
        socialIcons.map((item) => (
          <li>
            <a
              href={item.url}
              class='hover:text-green hover:underline transition-all duration-150 ease-in-out'
              target='_blank'
              title={`'See @renatomce on ${item.name}`}
            >
              <div class:list={[item.icon, "w-6 h-6"]} />
            </a>
          </li>
        ))
      }
    </ul>
  </nav>
  <nav class='md:hidden flex'>
    <h2 class='hidden'>Mobile Navigation</h2>
    <ul>
      <li><a href='/blog/'>Blog</a></li>
    </ul>
  </nav>
  <nav class='md:hidden flex'>
    <h2 class='hidden'>Mobile Navigation</h2>
    <ul>
      <li><a href='/projects/'>Projects</a></li>
    </ul>
  </nav>
</header>