<script setup lang="ts">
  import {
    Button,
    Popover,
  } from '@pikaso/core'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Open Popover</Popover.Trigger>
      </Button>

      <Popover.Content>
        <div class="flex flex-col gap-2">
          <h3 class="font-medium">Popover Title</h3>
          <p class="text-surface-foreground-2 text-sm">
            This is a basic popover content with some text.
          </p>
        </div>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    Button,
    Popover,
  } from '@pikaso/core'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center gap-4">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Start Aligned</Popover.Trigger>
      </Button>

      <Popover.Content align="start">
        <p class="text-sm">
          This popover is
          <strong>start</strong>
          aligned.
        </p>
      </Popover.Content>
    </Popover.Root>

    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Center Aligned</Popover.Trigger>
      </Button>

      <Popover.Content align="center">
        <p class="text-sm">
          This popover is
          <strong>center</strong>
          aligned.
        </p>
      </Popover.Content>
    </Popover.Root>

    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>End Aligned</Popover.Trigger>
      </Button>

      <Popover.Content align="end">
        <p class="text-sm">
          This popover is
          <strong>end</strong>
          aligned.
        </p>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    Button,
    Popover,
  } from '@pikaso/core'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex flex-wrap items-center justify-center gap-4">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Top</Popover.Trigger>
      </Button>

      <Popover.Content side="top">
        <p class="text-sm">
          This popover appears on the
          <strong>top</strong>
          .
        </p>
      </Popover.Content>
    </Popover.Root>

    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Right</Popover.Trigger>
      </Button>

      <Popover.Content side="right">
        <p class="text-sm">
          This popover appears on the
          <strong>right</strong>
          .
        </p>
      </Popover.Content>
    </Popover.Root>

    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Bottom</Popover.Trigger>
      </Button>

      <Popover.Content side="bottom">
        <p class="text-sm">
          This popover appears on the
          <strong>bottom</strong>
          .
        </p>
      </Popover.Content>
    </Popover.Root>

    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Left</Popover.Trigger>
      </Button>

      <Popover.Content side="left">
        <p class="text-sm">
          This popover appears on the
          <strong>left</strong>
          .
        </p>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    Button,
    Popover,
  } from '@pikaso/core'
  import { X } from 'lucide-vue-next'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Open With Close Button</Popover.Trigger>
      </Button>

      <Popover.Content class="relative">
        <Popover.Close>
          <X class="size-4" />
        </Popover.Close>

        <div class="flex flex-col gap-2 pt-2">
          <h3 class="font-medium">Dismissible Popover</h3>
          <p class="text-surface-foreground-2 text-sm">
            This popover includes a close button in the top-right corner.
          </p>
          <p class="text-surface-foreground-2 text-sm">
            You can also close it by clicking outside or pressing Escape.
          </p>
        </div>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    Button,
    Popover,
  } from '@pikaso/core'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Custom Styled Popover</Popover.Trigger>
      </Button>

      <Popover.Content
        class="bg-primary-0 text-primary-foreground-0 max-w-xs overflow-hidden p-0 dark"
      >
        <div class="p-4">
          <h3 class="text-lg font-semibold">Custom Styled Popover</h3>
          <p class="mt-2 text-sm">
            This popover has custom styling applied using regular Tailwind
            classes.
          </p>
        </div>
        <div class="bg-primary-foreground-0/10 p-4">
          <Button
            variant="ghost"
            class="w-full justify-center"
          >
            Action Button
          </Button>
        </div>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    IconButton,
    Popover,
  } from '@pikaso/core'
  import { Banana } from 'lucide-vue-next'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <Popover.Root>
      <IconButton
        size="sm"
        tooltip="Tooltip!"
        tooltip-position="top"
        variant="ghost"
        as-child
      >
        <Popover.Trigger>
          <Banana class="size-4" />
        </Popover.Trigger>
      </IconButton>

      <Popover.Content>
        <p>Hello</p>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    IconButton,
    Popover,
  } from '@pikaso/core'
  import { Banana } from 'lucide-vue-next'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center gap-2">
    <Popover.Root>
      <template #default="{ open }">
        <IconButton
          size="sm"
          :aria-pressed="open"
          tooltip="Tooltip!"
          tooltip-position="top"
          variant="ghost"
          as-child
        >
          <Popover.Trigger>
            <Banana class="size-4" />
          </Popover.Trigger>
        </IconButton>

        <Popover.Content>
          <p>The icon appears pressed if the popover is open</p>
        </Popover.Content>
      </template>
    </Popover.Root>
  </div>
</template>

<script setup lang="ts">
  import {
    Button,
    Popover,
    Select,
  } from '@pikaso/core'
  import { useHotkeyGlobalContext } from '@pikaso/core'

  useHotkeyGlobalContext()
</script>

<template>
  <div class="flex items-center justify-center">
    <Popover.Root>
      <Button
        variant="primary"
        as-child
      >
        <Popover.Trigger>Open Popover</Popover.Trigger>
      </Button>

      <Popover.Content>
        <Select.Root>
          <Select.TriggerSimple class="w-full">
            Open Popover
          </Select.TriggerSimple>

          <Select.Content>
            <Select.ItemSimple
              value="1"
              label="Item 1"
            />
            <Select.ItemSimple
              value="2"
              label="Item 2"
            />
            <Select.ItemSimple value="3" label="Item 3" />
          </Select.Content>
        </Select.Root>
      </Popover.Content>
    </Popover.Root>
  </div>
</template>