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

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

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