import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Elements/Action',
    component: 'x-action',
    argTypes: {
        icon: IconsControl,
        color: ColorsControl,
    },
};
const Template = new Builder(args => `<x-action ${toProps(args)} style="max-width: 400px">
		<h6>Welcome</h6>
		<h4>John Doe</h4>
	</x-action>`);
export const Simple = Template.args({
    color: 'default',
    icon: 'home',
}).build();
export const Colors = Template.args({}).build(() => `<x-row>
	${ColorsControl.options.map(color => `<x-col size="3"><x-action class="mb-3" icon="paint-brush" color="${color}">
		<h6>Painted in</h6>
		<h4>${color}</h4>
	</x-action></x-col>`).join('')}
</x-row>`);
export const PostitionRight = Template.args({
    color: 'purple',
    icon: 'right',
    position: 'right'
}).build();
export const AlignTop = Template.args({
    color: 'primary',
    icon: 'up',
    align: 'top',
    size: '8rem'
}).build();
export const AlignBottom = Template.args({
    color: 'primary',
    icon: 'down',
    align: 'bottom',
    size: '8rem'
}).build();
export const WithImage = Template.args({
    color: 'brown',
    align: 'bottom',
    size: '8rem',
    image: 'merchant.png'
}).build();
export const WithSlot = Template.args({
    align: 'bottom',
}).build(args => `<x-action ${toProps(args)} style="max-width: 400px">
	<h6>Monthly</h6>
	<h4>Sales</h4>

	<x-icon name="merchant" size="6rem" color="success" raised slot="media"></x-icon>
</x-action>`);
