<script setup>
import { onMounted } from 'vue'
import { APP_COPYRIGHT } from '@/config.js'
import useDarkMode from '@Stores/DarkMode'

import Logo       from '@Holos/Logo.vue'
import IconButton from '@Holos/Button/Icon.vue'

/** Definidores */
const darkMode = useDarkMode()

const year = (new Date).getFullYear();

/** Propiedades */
defineProps({
    title: String
})

/** Ciclos */
onMounted(() => {
    darkMode.boot()
});
</script>

<template>
  <div class="h-screen flex bg-white dark:bg-gray-900">
    <!-- Columna izquierda - Logo -->
    <div class="hidden lg:flex lg:w-1/2 bg-[#621134] items-center justify-center relative">
      <div class="flex items-center justify-center">
        <Logo size="xl" class="text-lg inline-flex" />
      </div>
    </div>

    <!-- Columna derecha - Formulario -->
    <div class="flex w-full lg:w-1/2 items-center justify-center bg-gray-50 dark:bg-gray-800">
      <div class="w-full max-w-md px-8">
        <!-- Mobile logo y dark mode toggle -->
        <div class="lg:hidden mb-8 flex items-center justify-between">
          <Logo size="md" class="text-lg inline-flex" />
          <IconButton v-if="darkMode.isLight"
            icon="light_mode"
            :title="$t('app.theme.light')"
            @click="darkMode.applyDark()"
          />
          <IconButton v-else
            icon="dark_mode"
            :title="$t('app.theme.dark')"
            @click="darkMode.applyLight()"
          />
        </div>

        <main>
          <RouterView />
        </main>

        <footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
          <span>
            &copy {{year}} {{ APP_COPYRIGHT }}
          </span>
        </footer>
      </div>
    </div>
  </div>
</template>
