import React, { useState } from 'react';
import { Panel, Button, Grid, Header, Text }  from '../src';
import empty from '../src/assets/empty.svg';

export default {
  title: 'Panel',
  component: Notification,
};

export const All = () =>{
  return(
  <div style={{ maxWidth: "500px", margin: "auto" }}>
      <div>
        <MyPanel text="Right" position="Right"/>
      </div>
      <br/>
    <div>
      <MyPanel text="Left" position="left"/>
    </div>
  </div>)}

const MyPanel = ({ text, position} : any)=>{
  const [showPanel, setShowPanel] = useState(false);
  return(
    <>
    <Text bold>{text}</Text>
    <Button onClick={() =>setShowPanel(!showPanel)}>Open Panel</Button>
  
  <Panel 
    position={position}
    show={showPanel} 
    close={()=>setShowPanel(false)}
  >
   <Grid placeItems="center" height="100%">
     <div>
        <img src={empty} style={{maxWidth: "90%"}}/>
         <Header bold>No Item</Header>
      </div>
    </Grid>
  </Panel>  
  </>
  )
}