import { Button } from '@roleypoly/design-system/atoms/button';
import { Hero } from '@roleypoly/design-system/atoms/hero';
import * as React from 'react';
import { SparkleOverlay } from './Sparkle';

export default {
    title: 'Atoms/Sparkle',
    component: SparkleOverlay,
    args: {
        size: -10,
        opacity: 1,
        repeatCount: 3,
    },
};

export const ExampleButton = (args) => (
    <Hero>
        <SparkleOverlay {...args}>
            <Button>Yo check this!</Button>
        </SparkleOverlay>
    </Hero>
);
