import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react';
import {Colors} from '../../theme';
import {Backdrop} from '../src';

export default {
    title: 'Display/Backdrop',
    component: Backdrop,
    parameters: {
        layout: 'centered'
    },
    args: {
        opacity: 0.95,
        background: Colors.commonBg
    }
} as ComponentMeta<typeof Backdrop>;

export const Cover: ComponentStory<typeof Backdrop> = (args) => (
    <div style={{width: '100vw', height: '100vh'}}>
        <Backdrop {...args}/>
        <span style={{position: 'absolute', zIndex: 1}}>Text above a "position: absolute" Backdrop</span>
    </div>
);
Cover.args = {
    type: 'cover'
}

export const Global: ComponentStory<typeof Backdrop> = (args) => (
    <div style={{width: '100vw', height: '100vh'}}>
        <Backdrop {...args}/>
        <span style={{position: 'absolute', zIndex: 1}}>Text above a "position: fixed" Backdrop</span>
    </div>
);
Global.args = {
    type: 'global'
}