<script lang="ts" setup>
import { useService } from '@factor/api'
import type { FactorUi } from '.'

defineProps({
  title: { type: String, default: undefined },
})

const emit = defineEmits<{
  (event: 'nav', payload: boolean): void
}>()

const { factorUi } = useService<{
  factorUi: FactorUi
}>()
</script>

<template>
  <div
    class="navbar text-theme-800 border-theme-300 from-theme-0 via-theme-0 to-theme-0 border-b bg-gradient-to-b text-sm font-medium"
    @click.stop
  >
    <div class="mx-auto flex items-center justify-between gap-y-3 px-5 py-2">
      <div class="flex items-center md:min-w-[150px]">
        <RouterLink to="/" class="active:opacity-80 sm:hidden">
          <component
            :is="factorUi.Logo"
            class="scheme-light h-[18px] w-auto md:h-[22px]"
          />
        </RouterLink>
        <div class="hidden text-lg font-semibold sm:block">
          {{ title }}
        </div>
      </div>

      <div class="flex h-full justify-end space-x-4 md:min-w-[150px]">
        <div
          class="group flex h-8 w-8 cursor-pointer flex-col justify-center space-y-1 p-1"
          @click="emit('nav', true)"
        >
          <div
            class="bg-theme-300 group-active:bg-theme-400 h-1 rounded-full"
          />
          <div
            class="bg-theme-300 group-active:bg-theme-400 h-1 rounded-full"
          />
          <div
            class="bg-theme-300 group-active:bg-theme-400 h-1 rounded-full"
          />
        </div>
      </div>
    </div>
  </div>
</template>
