---
import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";

export interface Props {
  url: string;
}

const { url } = Astro.props;
const form = new FormGroup([
  {
    name: "url",
    value: url,
    placeholder: "Type a URL here",
    validators: [Validators.required, Validators.minLength(11)],
  },
]);
---

<div class="address-bar">
  <Form
    formGroups={form}
    showValidationHints
  />
  <nav>
  <a href="/"
    >📚 Home</a
  >
  •
  <a target="_blank" href="https://github.com/ayoayco/cozy"
    >⭐️ GitHub</a
  >
  •
  <a class="nav-badge" href="https://github.com/ayoayco/cozy-reader/releases/latest"><img alt="Alpha Version" src="https://img.shields.io/github/package-json/v/ayoayco/cozy?label=alpha" /></a>
  </nav>
</div>

<style lang="scss">
  .address-bar {
    text-align: center;
    padding: 0.5em;
    width: 100%;
  }

  nav {
    margin: 0.5em 0;

    a:hover {
      text-decoration: underline;
    }
    a {
      color: brown;
      text-decoration: none;
    }
    img {
      display: inline;
      vertical-align: middle;
    }
  }

  :global(input) {
    width: var(--cozy-width);
    text-align: center;
    border: 0px;
    border-radius: 5px;
    padding: 0.5rem;
    background-color: #f5f5f5;
    box-shadow: 0 0 1px 1px #ccc;
    cursor: pointer;
  }
</style>