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

import { Popover } from '.';
import { Icon } from '../iconography';

const meta: Meta<typeof Popover> = {
  title: 'Components/Popover',
  component: Popover,
  argTypes: {
    side: {
      options: ['top', 'right', 'bottom', 'left'],
      control: {
        type: 'select',
      },
    },
    align: {
      options: ['start', 'center', 'end'],
      control: {
        type: 'select',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof Popover>;

export const SimpleTemplate: Story = {
  name: 'Simple Template',
  render: args => (
    <div style={{ display: 'flex', paddingTop: '3.5rem', justifyContent: 'center', width: '50%' }}>
      <Popover {...args} content="Content goes here">
        <Icon.Customers width={32} height={32} />
      </Popover>
    </div>
  ),
};

export const WithCustomCloseButton: Story = {
  name: 'With custom Close button',
  render: () => (
    <div style={{ display: 'flex', paddingTop: '3.5rem', justifyContent: 'center', width: '50%' }}>
      <Popover content="Content goes here" side="left" closeButton={<button>close</button>}>
        <Icon.Customers width={32} height={32} />
      </Popover>
    </div>
  ),
};
