import { select } from '@storybook/addon-knobs';
import { useState } from 'react';

import Button from '../button';

import SlidingPanel from './SlidingPanel';

export default {
  component: SlidingPanel,
  title: 'Dialogs/SlidingPanel',
};

export const Basic = () => {
  const [open, setOpen] = useState(false);

  const position = select('position', ['top', 'right', 'bottom', 'left'], 'top');

  return (
    <>
      <Button style={{ marginTop: 80 }} onClick={() => setOpen(!open)}>
        Open Sliding Panel
      </Button>
      <SlidingPanel open={open} position={position}>
        <div className="p-y-4 p-x-4 ">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry standard dummy text ever since the 1500s, when an unknown printer took a
          galley of type and scrambled it to
        </div>
      </SlidingPanel>
    </>
  );
};
