<template lang="pug">    
.c-card-interactive
	.c-card-interactive__element(
		data-module="cardInteractive"
	).bg-white.p-4.pt-8.flex.flex-col.relative.overflow-hidden
		.c-card-interactive__header.absolute.z-1.bg-white.w-full.top-0.right-0.p-4.px-8
			h3.text-base.font-400.px-2 {{ moduleName }}
		.c-card-interactive__cards.flex.flex-row
			Card(
				v-for="(card, index) in cardArr"
				:imageSrc="card.imageSrc"
				:title="card.title"
				:content="card.content"
				:link="card.link"
				:linkText="card.linkText"
				:key="`card-${index}`"
			)
		.c-card-interactive__footer.border-top
			.c-card-interactive__buttons.flex.flex-row.p-2.py-0
				a(href="#").c-card-interactive__button--prev.border.border-4.border-primary.p-4.py-2.m-2.col.flex.justify-center Prev
				a(href="#").c-card-interactive__button--next.border.border-2.border-primary.p-4.py-2.m-2.col.flex.justify-center Next

</template>

<script>
import $ from 'jquery'
import { addInitialPluginsAndHydrate } from '@/utils/conditioner'
import Card from './Card.vue'

export default {
	components: {
		Card,
	},
	props: {
		/** Array of objects, each object represents a card and will render the card attributes. See Card component for details.
		 */
		cardArr: {
			type: Array,
			default: () => [],
		},
		/** Module name displayed in the header.
		 */
		moduleName: {
			type: String,
			default: '',
		},
	},
	mounted() {
		addInitialPluginsAndHydrate(this.$el)
	},
}
</script>

<style lang="scss">
</style>
<docs>
```jsx

const cardArr = [
	{
		title: 'Card title 1',
		content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
		imageSrc: 'images/music-image.jpg',
		link: '/read-more/article-name',
		linkText: 'View more'
	},
	{
		title: 'Card title 2',
		content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
		imageSrc: 'images/music-image.jpg',
		link: '/read-more/article-name',
		linkText: 'View more'
	},
	{
		title: 'Card title 3',
		content: 'Lorem enim ad minim veniam, quis nostrud exercitation.',
		imageSrc: 'images/music-image.jpg',
		link: '/read-more/article-name',
		linkText: 'View more'
	}
]

<CardInteractive
	style="max-width: 500px"
	:cardArr="cardArr"
	moduleName="Module name"
/>
```
</docs>

