import Builder, { ColorsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Chip',
    component: 'x-chip',
    argTypes: {
        color: ColorsControl,
    },
};
const Template = new Builder(args => `<x-chip ${toProps(args)}><span>Hello World</span></x-chip>`);
export const Simple = Template.args({}).build();
export const Colors = Template.args({}).build(() => `<div>
	${ColorsControl.options.map(color => `<x-chip class="mb-1 mr-1" color="${color}"><span>${color}</span></x-chip>`).join('')}
</div>`);
export const Hoverable = Template.args({
    hoverable: true,
}).build();
export const WithIcon = Template.args({
    hoverable: true,
}).build(args => `<div>
	<x-chip ${toProps(args)}><x-icon name="left"></x-icon></x-chip>
	<x-chip ${toProps(args)} color="primary"><x-icon name="link"></x-icon></x-chip>
	<x-chip ${toProps(args)} color="red"><x-icon name="webhook"></x-icon><span>Webhook</span></x-chip>
	<x-chip ${toProps(args)} color="blue"><x-icon name="facebook"></x-icon></x-chip>
	<x-chip ${toProps(args)} color="green"><x-icon name="whatsapp"></x-icon></x-chip>
</div>`);
export const WithButton = Template.args({
    hoverable: false,
}).build(args => `<div>
	<x-chip ${toProps(args)}>
		<p class="px-2">PixelPay UI with Stencil is here!</p>
		<x-button icon="right" icon-align="right" color="success">Read more</x-button>
	</x-chip>
	<div class="mb-2"></div>
	<x-chip ${toProps(args)}>
		<x-button icon="minus"></x-button>
		<span>Zoom control</span>
		<x-button icon="plus"></x-button>
	</x-chip>
</div>`);
export const WithAvatar = Template.args({
    hoverable: false,
}).build(args => `<div>
		<x-chip ${toProps(args)}>
			<x-avatar image="http://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?size=200"></x-avatar>
			<strong>Ivan Suazo</strong>
		</x-chip>

		<x-chip ${toProps(args)}>
			<x-avatar letters="IS"></x-avatar>
			<strong>Ivan Suazo</strong>
		</x-chip>
	</div>`);
