import { allIcons } from '~/utils/Icons';
import docs from '~forestry/3 - Styles/icons.mdx';

export default {
	title: '3 - Styles/Icons',
	parameters: {
		docs: {
			page: docs
		},
		componentName: 'sr-icon'
	}
};

export const Usage = () => '';

Usage.parameters = {
	variations: [
		{
			title: 'Default',
			src: `<sr-icon name="reset"></sr-icon>`
		},
		{
			title: 'Individual Color (can be set with CSS)',
			src: `<sr-icon name="reset" style="color: red"></sr-icon>`
		},
		{
			title: 'Individual Size (can be set with CSS)',
			src: `<sr-icon name="reset" style="font-size: 64px"></sr-icon>`
		},
		{
			title: 'Unavailable Icon (Warning in developer console)',
			src: `<sr-icon name="i-dont-exist"></sr-icon>`
		}
	]
};

export const AvailableIcons = () => `
	<h2>All Icons</h2>
	${allIcons
		.map(
			name =>
				'<div class="icon-example"><sr-icon name=' +
				name +
				'></sr-icon><span class="icon-example-text">' +
				name +
				'</span></div>'
		)
		.join('\n')}
`;

AvailableIcons.parameters = {
	docs: false
};
