---
const { title = "Log in" } = Astro.props;

interface Props {
  title?: string;
}
---

<button
  type="button"
  class="flex items-center gap-x-2 font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
  data-hs-overlay="#hs-toggle-between-modals-login-modal"
>
  <svg
    class="h-4 w-4 flex-shrink-0"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
    <circle cx="12" cy="7" r="4"></circle>
  </svg>
  {title}
</button>