<template>
  <div class="left-right-component" :class="{ 'left-right-component--reverse': props.reverse }">
    <div class="left">
      <slot name="left">
        <img src="@/assets/img/chest.png" alt="kraken" class="image-card" />
      </slot>
    </div>

    <div class="right">
      <slot name="right">
        <h2>Challenge the AI</h2>
        <p>
          KrAIken is a <u>DeFAI</u> Protocol in open beta.<br /><br />
          Everyone is invited to train the AI by trading and challenge it's liquidity positions.
        </p>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface LeftRightComponentProps {
  reverse?: boolean;
}

const props = withDefaults(
  defineProps<LeftRightComponentProps>(),
  {
    reverse: false,
  }
);
</script>

<style lang="sass">
.left-right-component
    display: flex
    justify-content: space-between
    align-items: center
    gap: 24px
    flex-direction: column
    text-align: center
    @media (min-width: 768px)
        flex-direction: row
        text-align: unset
    &.left-right-component--reverse
        flex-direction: column
        @media (min-width: 768px)
            flex-direction: row-reverse
    .left
        img
            height: 255px
            width: 255px
            @media (min-width: 768px)
                width: unset
                height: unset
    .right
        max-width: 480px
        text-align: center
        @media (min-width: 768px)
            text-align: unset
            text-align: left

        h2
            font-size: 24px
            font-weight: 400
            @media (min-width: 768px)
                font-size: 27px

        p
            margin-bottom: 32px
            @media (min-width: 768px)
                font-size: 18px
</style>
