<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const menuItems = [
  {
    title: 'Create game',
    description: 'Create a new game and invite your friends to play with you.',
    icon: 'add_circle_outline',
    routeName: 'create-Game',
    color: 'green-9'
  },
  {
    title: 'Spiel beitreten',
    description: 'Join a game by typing in the game identifier.',
    icon: 'login',
    routeName: 'join-Game',
    color: 'blue-9'
  },
  {
    title: 'Settings',
    description: 'This area is currently under construction.',
    icon: 'settings',
    routeName: 'settings',
    color: 'grey-8'
  },
  {
    title: 'Rules',
    description: 'Look at the rules to have a clear understanding for playing the game.',
    icon: 'settings',
    routeName: 'rules-Game',
    color: 'grey-8'
  }
];

const navigateTo = (routeName: string) => {
  router.push({ name: routeName });
};
</script>

<template>
  <transition-group
    appear
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"

    tag="div"
    class="row q-col-gutter-md justify-center"
    style="width: 100%; max-width: 1000px;"
  >
    <div
      v-for="(item, index) in menuItems"
      :key="index"
      class="col-12 col-sm-6 col-md-4"
      :style="{ animationDuration: '1.6s', animationDelay: `${index * 0.3 + 0.5}s` }"
    >
      <q-card
        class="menu-card bg-dark text-white q-pa-sm cursor-pointer"
        v-ripple
        @click="navigateTo(item.routeName)"
      >
        <q-card-section class="row items-center no-wrap">
          <q-avatar
            :icon="item.icon"
            :color="item.color"
            text-color="white"
            size="lg"
            class="q-mr-md shadow-2"
          />
          <div>
            <div class="text-h6">{{ item.title }}</div>
            <div class="text-caption text-grey-5">
              {{ item.description }}
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </transition-group>
</template>

<style scoped>
.menu-card {
  transition: transform 0.2s, background-color 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-card:hover {
  transform: translateY(-5px);
  background-color: #2c3e50 !important;
  border-color: var(--q-primary);
}
</style>
