<template>
    <div
        class="p-4 shadow-refBox flex flex-row justify-between cursor-pointer group md:flex-col"
        :class="{ 'opacity-50': disabled }"
        @click="pressed">
        <h4 class="font-itcBold text-lg leading-tight my-auto md:my-0 md:pb-5 text-blue">
            {{ title }}
        </h4>
        <p class="font-roboto text-blue font-light leading-relaxed text-sm hidden md:block mb-5">
            {{ text }}
        </p>

        <div
            class="flex mt-auto w-10 h-10 bg-orange transition duration-200"
            :class="{ 'group-hover:bg-blue': !disabled }">
            <RightArrowIcon class="m-auto w-7 h-7 text-white" />
        </div>
    </div>
</template>

<script>
import RightArrowIcon from "../icon/RightArrowIcon.vue";
export default {
    name: "RefBox",
    components: {RightArrowIcon},
    props: {
        title: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        pressed: {
            type: Function,
            default: () => {}
        },
        disabled: {
            type: Boolean,
            default: false
        }
    }
}
</script>
