---
import Logo from '/logo.svg'

export interface Props {
  title: string
  visible: boolean
}

const { visible = false, title } = Astro.props
---

<header class={`fixed top-0 z-10 w-full bg-white bg-opacity-60 py-4 ${visible ? 'visible' : 'hidden'}`}>
  <div class="px-4 sm:px-0 container mx-auto flex justify-between">
    <div class="flex">
      <img src={Logo} class="mr-8" />
      <a class="font-bold" href="/" title="Home">{title}</a>
    </div>
    <ul class="flex">
      <a href="https://tresjs.org/" target="_blank" class="i-carbon-document"></a>
    </ul>
  </div>
</header>

<style scoped>
  header {
    backdrop-filter: blur(10px);
  }
</style>
