<template>
    <popup :heading="event.name" @close="$emit('close')">
        <div class="flex items-baseline text-sm">
            <calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
            <span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
        </div>

        <div class="mt-3">
            <img :src="event.image" class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
            <content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
        </div>
        <div class="flex mt-3">
            <a
                :href="registerUrl.replace(':slug', event.slug)"
                class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-font focus:outline-none bg-primary text-font"
            >
                Zur Anmeldung
            </a>
        </div>
    </popup>
</template>

<script setup>
import CalendarIcon from './icons/CalendarIcon.vue';
import Content from './Content.vue';
import Popup from './Popup.vue';

const emit = defineEmits(['close']);
const props = defineProps({
    event: {
        required: true,
    },
    registerUrl: {
        required: true,
        type: String,
    },
});
</script>
