import * as React from "react";
import { css } from "@pigment-css/react";
 
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverArrow,
  PopoverContent,
  PopoverPositioner,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Stack } from "@/components/ui/stack";
import { Text } from "@/components/ui/text";
 
export function PopoverExample(): React.JSX.Element {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline">Open popover</Button>} />
      <PopoverPositioner side="bottom" sideOffset={4}>
        <PopoverContent>
          <PopoverArrow />
          <Stack gap={2}>
            <Text fontSize="sm" fontWeight="semibold">
              Project Configuration
            </Text>
            <Text fontSize="sm" className={css({ color: "var(--color-mutedForeground)" })}>
              Set the project configuration.
            </Text>
          </Stack>
        </PopoverContent>
      </PopoverPositioner>
    </Popover>
  );
}