<script setup lang="ts">
import { useLayout } from '@/layouts/sakai-vue/composables/layout';

const { isDarkTheme } = useLayout();

// const isDark = computed(() => useColorMode().value == 'dark');
const bgColor = computed(() => (isDarkTheme.value ? '#000' : '#fff'));
</script>

<template>
  <div class="z-10 flex h-56 w-full flex-col items-center justify-center">
    <GradientButton :bg-color="bgColor">Zooooooooooom 🚀</GradientButton>
  </div>
  <div class="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
    <CardSpotlight
      class="cursor-pointer flex-col items-center justify-center whitespace-nowrap text-4xl shadow-2xl"
      :gradient-color="isDarkTheme ? '#363636' : '#C9C9C9'"
    >
      Card Spotlight
    </CardSpotlight>
  </div>

  <Dock class="mb-6">
    <DockIcon>
      <Icon-mdi-github class="size-full" />
    </DockIcon>
    <DockSeparator />
    <DockIcon>
      <Icon-mdi-google-drive class="size-full" />
    </DockIcon>
    <DockIcon>
      <Icon-logos-notion-icon class="size-full" />
    </DockIcon>
    <DockIcon>
      <Icon-logos-whatsapp-icon class="size-full" />
    </DockIcon>
  </Dock>
</template>
