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

interface Props {
  title?: string;
}

const baseClasses =
  "flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 ring-zinc-500 transition duration-300 focus-visible:ring-3 outline-hidden";
const hoverClasses = "hover:text-orange-400 dark:hover:text-orange-300";
const darkClasses =
  "dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:focus:outline-hidden";
const mdClasses = "md:my-6 md:border-s md:border-neutral-300 md:ps-6";
const txtSizeClasses = "2xl:text-base";
---

<a
  href="/en/login"
  class={`${baseClasses} ${hoverClasses} ${darkClasses} ${mdClasses} ${txtSizeClasses}`}
>
  {title}
</a>