<script setup lang="ts">
import { ref } from "vue";
import { useBreadcrumbStore } from "~/stores/breadcrumbs";
import { Button } from "@/components/ui/button";

import { useRuntimeConfig, useSeoMeta } from "#app";

const config = useRuntimeConfig();

const lastClicked = ref<string>("None");

const buttonClicked = (variant: string) => {
  lastClicked.value = variant;
};

const breadcrumbStore = useBreadcrumbStore();
breadcrumbStore.setBreadcrumbs([{ label: "Homepage", to: "/" }]);

useSeoMeta({
  title: "Glowing Fiesta - Homepage",
  ogTitle: "Glowing Fiesta - Homepage",
  description: "This is the homepage of a very nice all-purpose application",
  ogDescription: "This is the homepage of a very nice all-purpose application",
  ogImage: config.public.hostUrl + "/images/human.png",
});
</script>

<template>
  <div class="grid auto-rows-min gap-4 md:grid-cols-3">
    <div class="bg-muted/50 aspect-video rounded-xl" />
    <div class="bg-muted/50 aspect-video rounded-xl flex items-center justify-center gap-2">
      <span class="text-primary">Last clicked button:</span>
      <span class="font-bold text-lime-500">{{ lastClicked }}</span>
    </div>
    <div class="bg-muted/50 aspect-video rounded-xl" />
  </div>
  <div class="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min flex items-center justify-center gap-2">
    <Button variant="default" @click="buttonClicked('default')">Default</Button>
    <Button variant="outline" @click="buttonClicked('outline')">Outline</Button>
    <Button variant="ghost" @click="buttonClicked('ghost')">Ghost</Button>
    <Button variant="link" @click="buttonClicked('link')">Link</Button>
    <Button variant="secondary" @click="buttonClicked('secondary')">Secondary</Button>
    <Button variant="destructive" @click="buttonClicked('destructive')">Destructive</Button>
  </div>
</template>
