import docs from '~forestry/4 - Components/Basic Controls/tags.mdx';

export default {
	title: '4 - Components/Basic Controls/Tags',
	parameters: {
		componentName: ['sr-tag-area', 'sr-tag'],
		docs: {
			page: docs
		}
	}
};

export const TagArea = () => '';
export const SingleDefault = () => '';
export const SingleBorder = () => '';
export const SingleTransparent = () => '';

TagArea.parameters = {
	variations: [
		{
			title: 'Tag Area',
			src: `
				<sr-tag-area>
					<sr-tag>Cities</sr-tag>
					<sr-tag>Counties</sr-tag>
					<sr-tag>Hotspots</sr-tag>
				</sr-tag-area>`
		},
		{
			title: 'With title text',
			src: `
				<sr-tag-area text="Dive deeper with these tags:">
					<sr-tag>Cities</sr-tag>
					<sr-tag>Counties</sr-tag>
					<sr-tag>Hotspots</sr-tag>
				</sr-tag-area>`
		},
		{
			title: 'Centered',
			src: `
				<sr-tag-area centered>
					<sr-tag>Cities</sr-tag>
					<sr-tag>Counties</sr-tag>
					<sr-tag>Hotspots</sr-tag>
				</sr-tag-area>`
		},
		{
			title: 'Centered with title text',
			src: `
				<sr-tag-area centered text="Dive deeper with these tags:">
					<sr-tag>Cities</sr-tag>
					<sr-tag>Counties</sr-tag>
					<sr-tag>Hotspots</sr-tag>
				</sr-tag-area>`
		}
	]
};

SingleDefault.parameters = {
	componentName: ['sr-tag', 'sr-tag-area'],
	variations: [
		{ title: 'Link', src: `<sr-tag href="https://www.swissre.com">Link</sr-tag>` },
		{ title: 'Button', src: `<sr-tag>Link</sr-tag>` }
	]
};

SingleBorder.parameters = {
	componentName: ['sr-tag', 'sr-tag-area'],
	variations: [
		{ title: 'Link', src: `<sr-tag color="border" href="https://www.swissre.com">Link</sr-tag>` },
		{ title: 'Button', src: `<sr-tag color="border">Link</sr-tag>` }
	]
};

SingleTransparent.parameters = {
	backgrounds: {
		default: 'dark',
		values: [{ name: 'dark', value: '#282828' }]
	},
	variations: [
		{ title: 'Link', src: `<sr-tag color="transparent" href="https://www.swissre.com">Link</sr-tag>` },
		{ title: 'Button', src: `<sr-tag color="transparent">Link</sr-tag>` }
	]
};
