<template>
  <div class="grid gap-12">
    <div class="flex justify-between gap-4">
      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="top">
        <AisButton variant="secondary" size="sm" font="sans">Top</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="right">
        <AisButton variant="secondary" size="sm" font="sans">Right</AisButton>
      </AisPopover>

      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="bottom">
        <AisButton variant="secondary" size="sm" font="sans">Bottom</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="left">
        <AisButton variant="secondary" size="sm" font="sans">Left</AisButton>
      </AisPopover>
    </div>

    <div class="flex justify-between gap-4">
      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="top-start">
        <AisButton variant="secondary" size="sm" font="sans">Top-Start</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="right-start">
        <AisButton variant="secondary" size="sm" font="sans">Right-Start</AisButton>
      </AisPopover>

      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="bottom-start">
        <AisButton variant="secondary" size="sm" font="sans">Bottom-Start</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="left-start">
        <AisButton variant="secondary" size="sm" font="sans">Left-Start</AisButton>
      </AisPopover>
    </div>

    <div class="flex justify-between gap-4">
      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="top-end">
        <AisButton variant="secondary" size="sm" font="sans">Top-End</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="right-end">
        <AisButton variant="secondary" size="sm" font="sans">Right-End</AisButton>
      </AisPopover>

      <AisPopover content="This is my popover content!!!" title="Popover Title" placement="bottom-end">
        <AisButton variant="secondary" size="sm" font="sans">Bottom-End</AisButton>
      </AisPopover>

      <AisPopover content="This<br>is<br>my<br>popover<br>content" title="Popover Title" placement="left-end">
        <AisButton variant="secondary" size="sm" font="sans">Left-End</AisButton>
      </AisPopover>
    </div>
  </div>
</template>

<script setup>
import AisPopover from "@/components/popover/AisPopover.vue";
import AisButton from "@/components/button/AisButton.vue";
</script>

<script>
export default {
  name: "AisPopoverPlacement",
}
</script>