import { commonProps } from "../../utils/storybook";
import { Box } from "../box";
import { Text } from "../text";
import { Button } from "../button";
import { Popover } from ".";

import type { StoryObj, Meta } from "@storybook/react";

/**
 * Displays rich content in a portal, triggered by a button.
 */
const meta: Meta<typeof Popover> = {
  title: "Popover",
  component: Popover,
  tags: ["autodocs"],
  args: {
    trigger: <Button text="Open Popover" />,
    showCloseButton: true,
    showArrow: true,
  },
  argTypes: {
    ...commonProps,
  },
};

export default meta;

type Story = StoryObj<typeof Popover>;

export const Default: Story = {
  render: (args) => (
    <Popover {...args}>
      <Box css={{ bg: "transparent", p: "$3", width: "200px" }}>
        <Text variant="h3" css={{ color: "$light-off-white" }}>
          Title
        </Text>
        <Box css={{ mt: "$2" }}>
          <Text css={{ color: "$light-off-white" }}>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          </Text>
        </Box>
      </Box>
    </Popover>
  ),
};