import React from 'react';
import {Meta, StoryFn} from "@storybook/react-webpack5";
import Popovers from '@molecules/Popovers/Popovers';
import Button from '@atoms/Button/Button';
import { PopoversProps } from '@molecules/Popovers/Popovers';

export default {
  title: 'molecules/Popovers',
  component: Popovers,
  argTypes: {
    placement: {
      options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"],
      control: {
        type: "select",
      }
    }
  },
} as Meta;

const Template: StoryFn<PopoversProps> = (args: PopoversProps) => {
  return (
    <Popovers {...args}>
      <Button>Click me to see</Button>
    </Popovers>
  );
};

export const _Popovers = Template.bind({});
_Popovers.args = {
  title: 'Popover right',
  component: (
    <div>
      And here's some <strong>amazing</strong> content. It's very engaging. right?
    </div>
  ),
  flip: true,
  placement: undefined,
  trigger: "click",
  backdrop: true,
};