---
import Icon from "astro-iconify";

export interface Props {
  url: string | null;
}

const placeholder = "Type the article URL here";
const { url } = Astro.props;
---

<div class="address-bar">
  <form>
    <label for="app-url">
      <Icon name="ic:round-arrow-forward-ios" />
    </label>
    <input
      type="url"
      id="app-url"
      name="url"
      value={url ?? ""}
      placeholder={placeholder}
      required
    />
    <button
      aria-label="Submit"
      class="btn right-buttons primary"
      type="submit"
      id="submit"
    >
      <Icon name="ri:ai-generate" />
    </button>
    <a
      aria-label="Home"
      class="btn right-buttons"
      type="button"
      id="app-home"
      href="/"
    >
      <Icon name="mdi:home" />
    </a>

  </form>
</div>

<style>
  .address-bar {
    width: 100%;
    position: relative;
  }

  form:has(
    input[type="url"]:focus
  ) {
    border-color: var(--accent);
    box-shadow: 0 1px 10px 0px var(--accent);
  }

  form {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 30px;
    border: 2px solid rgb(var(--gray));
    background-color: white;
    box-shadow: 0 1px 3px 1px rgb(var(--gray-light));
    display: flex;

    input[type="url"]:focus {
      outline: none;
    }

    input[type="url"] {
      flex: 3;
      border: 0px;
      border-radius: 30px;
      font-size: normal;
      padding: 0.5rem;
      color: rgb(var(--black));
      caret-color: var(--accent);
    }

    label {
      display: block;
      border: 0px;
      height: 100%;
      vertical-align: middle;
      background-color: transparent;
      padding: 0.5rem 0;
      color: rgb(var(--gray));

      svg {
        border: 0px;
        background-color: transparent;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }
    
    .btn.primary {
      color: var(--accent);
    }

    .btn {
      color: rgb(var(--gray));
      display: block;
      border: 0px;
      height: 100%;
      vertical-align: middle;
      background-color: transparent;
      padding: 0.5rem 0;

      svg {
        border: 0px;
        background-color: transparent;
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
    }

    .left-buttons {
      margin-right: 0.5rem;
    }
    .right-buttons {
      margin-left: 0.5rem;
    }

    .btn svg:hover {
      color: blue !important;
    }

    .btn[disabled="true"] svg {
      color: rgb(var(--gray-light)) !important;
      cursor: default !important;
    }
  }
</style>