import { useState } from 'react';
import { Backdrop, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Backdrop',
    component: Backdrop,
    args: {
        alpha: 0.4,
        variant: 'dark',
        transitionSpeed: 'medium'
    },
    argTypes: {
        alpha: { control: { type: 'number' } },
        variant: { options: ['dark', 'light'], control: { type: 'select' } },
        transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }
    }
};
export const BackdropDemo = (args) => {
    const [open, setOpen] = useState(false);
    return (<>
      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>

      <Backdrop open={open} alpha={args.alpha} variant={args.variant} transitionSpeed={args.transitionSpeed}>
        <Button variant='primary' onClick={() => setOpen(false)}>
          Close Backdrop
        </Button>
      </Backdrop>
    </>);
};
export const DismissibleBackdropDemo = (args) => {
    const [open, setOpen] = useState(false);
    return (<>
      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>

      <Backdrop onClick={() => setOpen(false)} open={open} alpha={args.alpha} variant={args.variant} transitionSpeed={args.transitionSpeed}>
        <Card>
          <CardContent>
            <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>
          </CardContent>
        </Card>
      </Backdrop>
    </>);
};
//# sourceMappingURL=Backdrop.stories.jsx.map