<script setup lang="ts">
import type { ToolbarType } from './types';

import { AuthenticationLayoutToggle } from '../widgets';

interface Props {
  toolbarList?: ToolbarType[];
}

defineOptions({
  name: 'AuthenticationToolbar',
});

const props = withDefaults(defineProps<Props>(), {
  toolbarList: () => ['layout'],
});

const showLayout = () => props.toolbarList.includes('layout');
</script>

<template>
  <div
    :class="{
      'rounded-3xl bg-accent px-3 py-1': toolbarList.length > 1,
    }"
    class="absolute top-4 right-2 z-10 flex-center"
  >
    <!-- Only show on medium and larger screens -->
    <div class="hidden md:flex">
      <AuthenticationLayoutToggle v-if="showLayout()" />
    </div>
  </div>
</template>
