---
import { Icon } from 'astro-icon';
import { client as directus } from '@lib/directus';

const siteSettings = await directus.singleton('settings').read();

const links = [
  { href: '/', name: 'Home' },
  { href: '/about/', name: 'About' },
  { href: '/contact/', name: 'Contact' },
];
---

<header>
  <div>
    <div class='flex justify-between items-center'>
      <h1>{siteSettings?.site_title}</h1>
      <span>
        <Icon name={siteSettings?.site_icon || 'mdi:rss-feed'} width='52' height='52' />
      </span>
    </div>
    <nav class='mt-2'>
      <ul class='flex space-x-4'>
        {
          links.map((l) => (
            <li>
              <a
                class:list={[
                  'hover:underline italic',
                  { 'font-bold': Astro.url.pathname.slice(1) === l.href.slice(1) },
                ]}
                href={l.href}>
                {l.name}
              </a>
            </li>
          ))
        }
      </ul>
    </nav>
  </div>
  <hr />
  <p class='italic text-gray-700'>
    {siteSettings?.site_description}
  </p>
</header>