import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Showcase',
    component: 'x-showcase',
    subcomponents: ['x-showcase-item'],
};
export const Simple = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=500"
			thumb="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200"></x-showcase-item>
	</x-showcase>
</div>`)).args({}).build();
export const Empty = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
	</x-showcase>
</div>`)).args({}).build();
export const Multiple = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=500"
			thumb="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?d=404&size=500"></x-showcase-item>
	</x-showcase>
</div>`)).args({}).build();
export const WithVideos = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=500"
			thumb="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/NS9z2QHcZdY?autoplay=1&controls=0"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&controls=0"></x-showcase-item>
	</x-showcase>
</div>`)).args({}).build();
export const WithArrows = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=500"
			thumb="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/NS9z2QHcZdY?autoplay=1&controls=0"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/aatr_2MstrI?autoplay=1&controls=0"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&controls=0"></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
		<x-showcase-item></x-showcase-item>
	</x-showcase>
</div>`)).args({}).build();
export const WithActions = (new Builder(args => `<div style="max-width:400px; width: 100%">
	<x-showcase ${toProps(args)}>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=500"
			thumb="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?d=404&size=200"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/2a30fc5b79e49fc85e6245897c5bda7d?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="image" url="https://www.gravatar.com/avatar/c1f67dd86116068f2067918fe3c8f56c?d=404&size=500"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/NS9z2QHcZdY?autoplay=1&controls=0"></x-showcase-item>
		<x-showcase-item type="youtube" url="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&controls=0"></x-showcase-item>

		<div slot="actions">
			<x-button small icon="love"> Like</x-button>
			<x-button small icon="share">Share</x-button>
			<x-button small icon="message">Comment</x-button>
		</div>
	</x-showcase>
</div>`)).args({
    upload: true,
}).build();
