<template>
  <div
    class="relative w-full bg-foundation-page border border-outline-2 rounded-lg overflow-hidden p-12"
  >
    <div class="absolute inset-0">
      <img
        src="~~/assets/images/workspaces.png"
        alt="Introducing workspaces"
        class="absolute top-0 right-0 w-full sm:w-9/12 h-full object-cover dark:hidden"
      />

      <img
        src="~~/assets/images/workspaces-dark.png"
        alt="Introducing workspaces"
        class="absolute top-0 right-0 w-full sm:w-9/12 h-full object-cover hidden dark:block"
      />

      <div
        class="absolute top-0 right-0 h-full w-7/12 bg-gradient-to-r from-foundation-page"
      >
        <div class="h-full w-64 bg-gradient-to-r from-foundation-page" />
      </div>
    </div>

    <div class="relative z-10 text-foreground max-w-lg">
      <div class="flex gap-2 items-center">
        <h3 class="text-heading-lg">Introducing workspaces</h3>
        <CommonBadge rounded class="">BETA</CommonBadge>
      </div>
      <p class="text-body-sm mt-4">
        You are one click away from reaching higher data security, more data control,
        and better project management with your team. Get your workspace today!
      </p>
      <div class="flex mt-6 gap-2">
        <FormButton :disabled="!isAdmin" color="outline" @click="$emit('create')">
          Create workspace
        </FormButton>
        <!-- <FormButton color="subtle">Learn more</FormButton> -->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  isAdmin: boolean
}>()

defineEmits<{
  (e: 'create'): void
}>()
</script>
