import React, { useState } from 'react';
import { BottomSheet } from '@happyfresh/bottom-sheet';
import { css } from 'emotion';

export default {
  title: 'BottomSheet',
};

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

  const handleRequestClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open!</button>
      <BottomSheet open={open} onRequestClose={handleRequestClose} withCloseButton styles={{
          close: {
            top: 0
          }
        }}>
        <div>your child components here</div>
      </BottomSheet>
    </div>
  );
};