import Builder, { ColorsControl, IconsControl, toProps } from "../../utils/builder";
export default {
    title: 'Components/Card',
    component: 'x-card',
    argTypes: {
        icon: IconsControl,
        iconColor: ColorsControl,
    },
};
export const Simple = new Builder(args => `<x-card ${toProps(args)}>
		<h5>Card title</h5>
		<h6>This is a subtitle</h6>
		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		<a href="javascript:;" class="card-link">Action</a>
		<a href="javascript:;" class="card-link">Another action</a>
	</x-card>`)
    .args({})
    .build();
export const WithHeader = new Builder(args => `<x-card ${toProps(args)}>
		<div slot="header">
			With header
		</div>
		<h5>Card title</h5>
		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	</x-card>`)
    .args({})
    .build();
export const WithFooter = new Builder(args => `<x-card ${toProps(args)}>
		<div slot="footer">
			<button-field color="primary">Action</button-field>
		</div>
		<h5>Card title</h5>
		<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	</x-card>`)
    .args({})
    .build();
export const WithImageTop = new Builder(args => `<div style="max-width: 400px">
		<x-card ${toProps(args)}>
			<div slot="footer">
				<a href="javascript:;" class="card-link">Action</a>
				<a href="javascript:;" class="card-link">Another action</a>
			</div>
			<h5>Card title</h5>
			<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</x-card>
	</div>`)
    .args({
    image: 'https://cdn.pixelpay.app/cards/bg-6.png',
})
    .build();
export const WithImageBottom = new Builder(args => `<div style="max-width: 400px">
		<x-card ${toProps(args)}>
			<div slot="header">
				With bottom image
			</div>
			<h5>Card title</h5>
			<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</x-card>
	</div>`)
    .args({
    image: 'https://cdn.pixelpay.app/cards/bg-3.png',
    imagePosition: 'bottom',
})
    .build();
export const WithImageOverlay = new Builder(args => `<div style="max-width: 400px">
		<x-card ${toProps(args)}>
			<div slot="footer">
				<a href="javascript:;" class="card-link">Action</a>
				<a href="javascript:;" class="card-link">Another action</a>
			</div>
			<h5>Card title</h5>
			<h6>This is a subtitle</h6>
			<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</x-card>
	</div>`)
    .args({
    image: 'https://cdn.pixelpay.app/cards/bg-1.png',
    imagePosition: 'overlay',
})
    .build();
export const WithAccentIcon = new Builder(args => `<div style="max-width: 400px">
		<x-card ${toProps(args)}>
			<div slot="footer">
				<span class="text-muted"><i class="icon-clock"></i> 6 minutes ago</span>
				<a href="javascript:;" class="card-link"><i class="icon-right"></i> Go to action</a>
			</div>
			<h5>Card title</h5>
			<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</x-card>
	</div>`)
    .args({
    icon: 'auth-capture',
    iconColor: 'success',
})
    .build();
