<template functional>
  <nuxt-link
    :to="'/'"
    class="group inline-flex items-center focus:outline-none py-3"
  >
    <div
      class="
        w-6
        sm:w-9
        mr-4
        fill-current
        group-hover:text-purple-800
        transition-colors
      "
      v-html="$options.rawLogo"
    />

    <span
      class="
        bg-clip-text bg-gradient-to-r
        font-semibold
        from-purple-800
        group-hover:text-transparent
        text-lg
        sm:text-xl
        lg:text-2xl
        to-blue-700
        tracking-tight
        transition-colors
        whitespace-nowrap
      "
      :class="!props.showTitle && 'hidden lg:block'"
    >
      {{ $options.config.site_title }}
    </span>
  </nuxt-link>
</template>

<script>
import rawLogo from '~/static/uploads/logo-monnaie-libre.svg?raw'
import config from '~/static/settings/globals.json'

export default {
  name: 'LayoutHeaderLogo',
  rawLogo,
  config,
  props: {
    showTitle: {
      type: Boolean,
      default: true,
    },
  },
}
</script>