<script lang="ts">
  import { _ } from "svelte-i18n";

  const { hideName = false } = $props();
</script>

<img src="/logo.png" alt={$_("brand.name")} class="w-10 h-10 object-contain" />
<span
  class={`logo text-3xl text-foreground opacity-90 tracking-wide font-extrabold drop-shadow-x ${hideName ? "hidden sm:inline-block" : ""}`}
>
  {$_("brand.name")}
</span>

<style>
  .logo {
    font-family: "Dancing Script", cursive;
  }
</style>
