import { action } from 'storybook/actions';
import { useState } from 'react';

import { Button, Nudge } from '..';

import DropFade from './DropFade';

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

export const Basic = () => {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ margin: '0 auto', maxWidth: 400 }}>
      <DropFade show={open}>
        <Nudge
          media={
            <img
              alt=""
              style={{ width: 44, height: 44 }}
              src="https://wise.com/public-resources/assets/public-navigation/saving.svg"
            />
          }
          mediaName="globe"
          title="Did you know it's cool to be Wise?"
          link="Get Wise"
          href="https://wise.com"
          onClick={action('action clicked')}
          onDismiss={() => {
            action('dismissed');
            setOpen(false);
          }}
        />
      </DropFade>
      <Button v2 className="m-t-3" block onClick={() => setOpen(true)}>
        Some other content
      </Button>
    </div>
  );
};