<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
  subcontent: {
    type: String,
    required: true,
  },
  change: {
    type: Number,
    required: true,
  },
})

const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
</script>

<template>
  <VCard>
    <VCardText class="d-flex align-center" style="padding: 0;">
      <img width="100%" :src="props.image" alt="image">
    </VCardText>

    <VCardText>
      <p class="mb-1 mt-3">
        {{ props.title }}
      </p>
      <p class="mb-1">
        <b>{{ props.content }}</b>
      </p>
    </VCardText>
    <VCardText class="bg-secondary">
      <p class="mb-1 pt-2">

        Introducing FemExcelle Hormone Replacement Therapy (HRT) for women, now live! Explore our new "refer and earn"
        initiative: Refer a woman to FemExcelle, and she'll enjoy a 75% discount on the initial cost. Plus, for each
        referral, you'll receive a $79 credit towards your HGH account. Simply click and share the link below to
        begin referring today. Visit FemExcelle for more details
      </p>
    </VCardText>
  </VCard>
  <VCard class="mt-2">
    <VCardText class="d-flex align-center" style="padding: 0;">
      <img width="100%" :src="props.image" alt="image">
    </VCardText>

    <VCardText>
      <p class="mb-1 mt-3">
        <b>Recommend a Friend for Hormone Replacement Therapy Transform a Life</b>
      </p>
      <p class="mb-1 mt-2">
        They'll receive a $70 discount on their initial purchase, and you'll receive all the gratitude!
      </p>
      <p class="mt-2 mb-0">
        <RouterLink to="/overview">
          <VBtn class="text-capitalize">Recommend a Friend</VBtn>
        </RouterLink>
      </p>
    </VCardText>
  </VCard>

  <VCard class="mt-2">
    <VCardText class="d-flex align-center" style="padding: 0;">
      <img width="100%" :src="props.image" alt="image">
    </VCardText>

    <VCardText>
      <p class="mb-1 mt-3">
        <b>Regain Control of Your Life with Erectile Dysfunction Treatment</b>
      </p>
      <p class="mb-1 mt-2">
        Choices crafted to ensure men are prepared when the moment arrives.
      </p>
      <p>
        Now providing treatment in every state across the nation, we are thrilled to assist individuals in reclaiming
        their lives! Begin your journey today by completing our complimentary hormone assessment.
      </p>
      <p class="mt-2 mb-0">
        <RouterLink to="/overview">
          <VBtn class="text-capitalize"> Read More</VBtn>
        </RouterLink>
      </p>
    </VCardText>
  </VCard>
</template>
