<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

defineProps<{
  open: boolean
}>()

const goBack = () => {
  window.history.back()
}
</script>

<template>
  <AlertDialog :open="open">
    <AlertDialogContent class="text-center">
      <AlertDialogHeader>
        <AlertDialogTitle class="font-normal">
          Looks like you don't have access yet
        </AlertDialogTitle>
        <AlertDialogDescription>
          You've been invited to this project but your profile doesn't give you permission to use
          the Agent Hub's features.
          <br />
          <br />
          Please contact your admin to request an upgrade.
          <!-- TODO: Add link to the Agent Hub page & documentation when ready -->
          <!-- If you'd like to learn more about what the product can do, check out the Agent Hub
          page or the documentation. -->
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <Button @click="goBack"> Back to webapps </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>
