import React from 'react';
import { StoryFn, Meta } from '@storybook/react';

import { ModalTrigger } from './ModalTrigger';

export default {
  title: 'Modal',
  component: ModalTrigger,
} as Meta<typeof ModalTrigger>;

const Template: StoryFn<typeof ModalTrigger> = ({ label }) => {
  return (
    <>
      <ModalTrigger label={label} showLabel>
        {(onClose, titleProps) => (
          <div>
            <div {...titleProps}>Testing</div>
            <button type="button" onClick={onClose}>
              Close
            </button>
          </div>
        )}
      </ModalTrigger>
      <div style={{ height: '150vh' }} />
    </>
  );
};

export const Primary = Template.bind({});

Primary.args = {
  label: 'Resource Browser Modal',
};