Popover

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Popover } from '@cerberus/react'

export function BasicDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>}>
      <HStack p="md" w="full">
        Everything is content...
      </HStack>
    </Popover>
  )
}

'use client'

import { Button, Popover } from '@cerberus/react'

export function PlacementDemo() {
  return (
    <Popover
      trigger={<Button>Trigger</Button>}
      positioning={{
        placement: 'left-start',
        offset: { mainAxis: 12, crossAxis: 12 },
      }}
    >
      <Popover.Body>Everything is content...</Popover.Body>
    </Popover>
  )
}

'use client'

import { Button, Popover } from '@cerberus/react'

export function LazyDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>} lazyMounted unmountOnExit>
      <Popover.Body>Everything is content...</Popover.Body>
    </Popover>
  )
}

'use client'

import { Button, Popover } from '@cerberus/react'

export function NestedDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>}>
      <Popover.Body>
        This is the parent popover content.
        <Popover
          trigger={
            <Button usage="outlined-subtle" size="sm">
              Trigger
            </Button>
          }
        >
          <Popover.Body>This is the nested popover content.</Popover.Body>
        </Popover>
      </Popover.Body>
    </Popover>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Input, PopoverParts } from '@cerberus/react'

export function AnchorDemo() {
  return (
    <PopoverParts.Root size="lg">
      <HStack gap="md">
        <PopoverParts.Trigger asChild>
          <Button size="sm" usage="outlined-subtle">
            Trigger
          </Button>
        </PopoverParts.Trigger>

        <PopoverParts.Anchor>
          <Input placeholder="Anchor..." size="sm" />
        </PopoverParts.Anchor>
      </HStack>

      <PopoverParts.Positioner>
        <PopoverParts.Content>
          <PopoverParts.Body>This is anchored to the input.</PopoverParts.Body>
        </PopoverParts.Content>
      </PopoverParts.Positioner>
    </PopoverParts.Root>
  )
}

'use client'

import { PopoverParts } from '@cerberus/react'

export function CustomDemo() {
  return (
    <PopoverParts.Root size="lg">
      <PopoverParts.Trigger>Custom Trigger</PopoverParts.Trigger>

      <PopoverParts.Positioner>
        <PopoverParts.Content bgColor="page.bg.100" border="2px solid" rounded="none">
          <PopoverParts.Header pb="lg">This is a custom popover</PopoverParts.Header>
          <PopoverParts.Body bgColor="page.bg.200">
            That is fully built from scratch
          </PopoverParts.Body>
          <PopoverParts.Footer textStyle="heading-2xs">
            Footer sturf
          </PopoverParts.Footer>
        </PopoverParts.Content>
      </PopoverParts.Positioner>
    </PopoverParts.Root>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Popover } from '@cerberus/react'

export function ArrowDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>} usage="arrow">
      <HStack p="md" w="full">
        Everything is content...
      </HStack>
    </Popover>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, For, Popover } from '@cerberus/react'

export function SizesDemo() {
  return (
    <HStack gap="md">
      <For each={['xs', 'sm', 'md', 'lg']}>
        {(size: string) => (
          <Popover key={size} trigger={<Button size="sm">{size}</Button>} size={size}>
            <Popover.Body>This is a {size} popover</Popover.Body>
          </Popover>
        )}
      </For>
    </HStack>
  )
}

'use client'

import { Box, Circle, Divider, Float, HStack, Stack } from '@/styled-system/jsx'
import { AiAgentInvocation, Chat, Time, UserFollow } from '@carbon/icons-react'
import { Avatar, Button, ButtonGroup, Popover, Text } from '@cerberus/react'

export function SlotsDemo() {
  return (
    <Popover trigger={<Button>Trigger</Button>} size="lg">
      <Popover.Header>
        <HStack gap="md" pb="lg" w="full">
          <Box pos="relative">
            <Avatar fallback={<AiAgentInvocation />} gradient="asphodel-dark" />
            <Float placement="bottom-end" offsetX="1" offsetY="1">
              <Circle
                bgColor="success.bg.active"
                outline="0.2em solid"
                outlineColor="page.surface.initial"
                size="8px"
              />
            </Float>
          </Box>

          <Stack direction="column" gap="xs">
            <Popover.Title textStyle="heading-xs">Cerby tha Dawg</Popover.Title>
            <Popover.Description as="small" color="page.text.100" textStyle="body-xs">
              The best boi there is
            </Popover.Description>
          </Stack>
        </HStack>
      </Popover.Header>

      <Divider color="page.border.initial" thickness="1px" />

      <Popover.Body>
        <HStack color="page.text.100" gap="sm" w="full">
          <Time />
          <Text color="page.text.initial">6:66 Local Time</Text>
        </HStack>
      </Popover.Body>

      <Popover.Footer>
        <ButtonGroup>
          <Button size="sm" usage="outlined-subtle">
            <Chat />
            Message
          </Button>
          <Button size="sm" usage="outlined-subtle">
            <UserFollow />
            Add
          </Button>
        </ButtonGroup>
      </Popover.Footer>
    </Popover>
  )
}