<template>
  <div
    class="paragraph paragraph-call-to-action"
    :class="{ image: !!heritedData.background }"
    :style="backgroundStyle"
  >
    <p class="title">{{ heritedData.name }}</p>

    <div v-html="heritedData.body" />

    <Link
      v-if="heritedData.cta_link"
      :href="link"
      :target="target"
      :inline="false"
    >
      <Button>{{ heritedData.button_text }}</Button>
    </Link>
  </div>
</template>

<script>
import { Link, Button } from 'inside-collection/components'
import CallToActionParagraph from '@inside-library/components/paragraphs/CallToActionParagraph'

export default {
  name: 'cta-paragraph',
  extends: CallToActionParagraph,
  components: {
    Link,
    Button
  }
}
</script>
