<script setup lang="ts">
import Background from "./Background.vue";
import Buttons from "./Buttons.vue";
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
import Bars from "./Bars.vue";

const store = useContactStore();

const { selectorPosition } = useButtonNavigation({
  buttons: {
    github: [26, 27, 202, 42],
    email: [26, 59, 202, 42],
    website: [26, 91, 202, 42],
    cv: [26, 123, 202, 42],
  },
  navigation: {
    github: {
      down: "email",
    },
    email: {
      up: "github",
      down: "website",
    },
    website: {
      up: "email",
      down: "cv",
    },
    cv: {
      up: "website",
    },
  },
  initialButton: "github",
  onButtonClick: (buttonName) => {
    console.log("Clicked on selected button:", buttonName);
  },
});
</script>

<template>
  <Background />

  <Buttons />
  <ButtonSelector
    :rect="selectorPosition"
    :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
  />

  <Bars />
</template>
