<template>
  <div class="w-full min-h-screen flex flex-col items-center bg-gray-50">
    <!-- Header avec logo -->
    <header
      class="w-full bg-white shadow-sm overflow-hidden transition-all duration-300 ease-in-out"
      :class="{ 'h-0 py-0': uiStore.getSelectedBox, 'py-4 h-auto': !uiStore.getSelectedBox }"
    >
      <div class="max-w-7xl mx-auto w-full flex justify-center">
        <a href="/" class="inline-block">
          <logo />
        </a>
      </div>
    </header>

    <!-- Contenu principal -->
    <main>
      <slot />
    </main>

    <!-- Player de musique fixe en bas -->
    <searchModal />
    <loader />
    <Player class="w-full border-t border-gray-200" />
  </div>
</template>

<script setup>
import { useUiStore } from '~/store/ui'

const uiStore = useUiStore()
</script>
