import Builder, { toProps } from "../../utils/builder";
import { ANIMATIONS } from "./animations/animate/common";
import { EASING } from "./utils/easing";
export default {
    title: 'Components/Animate',
    component: 'x-animate',
    subcomponents: ['x-animate-lottie'],
    argTypes: {
        name: {
            options: Object.values(ANIMATIONS),
            control: {
                type: 'select',
            },
        },
        easing: {
            options: Object.values(EASING),
            control: {
                type: 'select',
            },
        },
    },
};
const Template = new Builder(args => `<x-animate ${toProps(args)}>
	<x-icon name="love-fill" size="5rem" color="danger"></x-icon>
</x-animate>`);
export const Simple = Template.args({
    name: 'heartBeat',
    iterations: 'Infinity',
    easing: 'ease-in-out',
    duration: 1200,
    delay: 500,
    autoplay: true,
}).build();
export const Lottie = Template.args({
    src: 'https://lottie.host/0cbdb3ef-2fa5-4d1d-9e4e-f66c879e010d/D0bRr9d93F.lottie',
    autoplay: true,
    height: '300px',
}).build(args => `<x-animate-lottie ${toProps(args)}></x-animate-lottie>`);
