<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="events px-2 py-2 m-2 max-w-lg">
        <div class="p-2">
            <span class="float-left text-xs">
                {{  format_date(item.show_date) }}
            </span>
            <span class="float-right text-right text-xs" style="width:60%;">
                <a :href="item.venue.website" target="_blank">
                    <b>
                        {{  item.venue.name }}
                    </b>
                </a> 
            </span>
        </div>
        <a :href="item.show_link"  target="_blank">
            <p class="text-2xl p-5">
                {{ item.show_title }}
            </p>
        </a> 
        <div class="p-2">
            <span class="float-left text-xs">
                {{  item.event_type }}
            </span>
            <span class="float-right text-right text-xs" style="width:60%;">
                {{  item.venue.city }}
            </span>
        </div>
        <p class="text-xs p-2">
            
        </p>
    </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>