<script setup>
    import moment from 'moment-timezone';

    defineProps({
        item: {
            type: Object,
            required: true
        },
        index: {
            type: Number,
            require: true
        },
    })

    function format_date(dateString) {
        let date = moment.utc(dateString);
        return date.format('dd @ h:mm a');
    };
</script>
        
<template>
    <div class="m-auto">
        <div class="float-right text-right text-xs p-2 m-3 w-70">
            {{  format_date(item.show_date) }} <br/>
            <a :href="item.venue.website" target="_blank">
                <b>
                    {{  item.venue.name }}
                </b>
            </a> 
            <a :href="item.show_link"  target="_blank">
                <p class="text-lg">
                    {{ item.show_title }}
                </p>
            </a>
            <span class="float-right text-xs">
                {{  item.venue.city }} | {{  item.event_type }}
            </span>
        </div>
    </div>
</template>
<style scoped>
    .events {
    border: .1em solid #333;
    border-radius: 25px;
    min-width: 325px;
    max-width: 400px;
    }

    @media (min-width: 800px) and (max-width:1023px) {
        .events {
            min-width: 300px;
            max-width: 300px;
        }
    }

    @media (min-width: 1024px) and (max-width: 1249) {
        .events {
            min-width: 300px;
            max-width: 400px;
        }
    }

    @media (min-width: 1250px) {
        .events {
            min-width: 325px;
            max-width: 475px;
        }
    }
</style>