<template lang="pug">
	blockquote.relative.pl-14.o-blockquote
		.absolute.top-0.left-0.text-primary
			// @slot Slot for replacing the icon
			slot(name="icon")
				Icon(name="quote32")
		.mb-4.o-blockquote__main
			// @slot Default slot is for the text text (for customised style of the `text`)
			slot
				.lead.o-blockquote__text(v-html="text", v-if="text")
		.mt-4.small.font-400.text-primary.o-quote__bottom
			// @slot Slot for replacing bottomTitle section (for customised style of the `bottomTitle`)
			slot(name="bottomTitle")
				.font-700.o-quote__bottom-title(v-html="bottomTitle", v-if="bottomTitle")
			// @slot Slot for replacing bottomSubtitle section (for customised style of the `bottomSubtitle`)
			slot(name="bottomSubtitle")
				span.o-quote__bottom-subtitle(v-html="bottomSubtitle", v-if="bottomSubtitle")
</template>

<script>
import Icon from '@/components/Icon'
export default {
	components: {
		Icon,
	},
	props: {
		/** blockquote main text */
		text: {
			type: String,
			default: '',
		},
		/** text that will appear as the title on the bottom section */
		bottomTitle: {
			type: String,
			default: '',
		},
		/** text that will appear as the subtitle on the bottom section */
		bottomSubtitle: {
			type: String,
			default: '',
		},
	},
}
</script>
<docs>
```jsx
<Blockquote>
<template>This is blockquote example using slot</template>
<template v-slot:icon>
	<Icon name="quote32" path="/spritemap.svg" />
</template>
<template v-slot:bottomTitle>
	<div class="u-fsi">Name test</div>
</template>
<template v-slot:bottomSubtitle>
	<div>Company details</div>
</template>
</Blockquote>

<hr>

<Blockquote
	text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
	bottomTitle="Robert De Jong"
	bottomSubtitle="The Johns Hopkins Hospital (JHM), USA"
>
<template v-slot:icon>
	<Icon name="quote32" path="/spritemap.svg" />
</template>
</Blockquote>
```
</docs>
