<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);
            // Then specify how you want your dates to be formatted
        return date.format('MM/DD');
        // return date.format('LLLL')
    };
</script>

<template>
    <div class="events xs:p-2 sm:p-2 md:p-4 lg:p-3 m-2" style="padding-top: revert-layer;">
        <div class="p-2">
            <div class="xs:text-center sm:text-center md:float-left lg:float-left text-xs">
                #{{ item.id }} |
                <a v-if="item.platform == 'bluesky'" :href="'https://bsky.app/profile/' + item.handle + '/post/' + item.uri" target="_blank" class="">
                    <b>
                        {{  item.platform }}
                    </b>
                </a>
                <a v-else="item.platform == 'reddit'" :href="item.link">
                    <b>
                        {{  item.platform }}
                    </b>
                </a> 
                | {{  format_date(item.created_at) }}
                <span v-if="item.published">
                    | <a :href="item.pub_link">
                        📝 {{ item.platform }}
                    </a>
                    
                </span> 
                <span v-else="!item.published">
                    | ✍️
                </span> 
            </div>
        </div>
        <br/>
        <div class="text-left">
            <p style="width:20em;">
            {{  item.text.slice(0,256) }}
            </p>

            <p v-if="item.link != 'blank' && item.platform =='bluesky'"  style="width:20em;">
                <a :href="item.link">Link</a> 
            </p>

            <p class="border" v-if="item.rt_text != 'blank'"  style="width:20em;">
                {{ item.rt_text }}
                <p v-if="item.rt_link != 'blank'">
                    <a :href="item.rt_link">RT Link</a> 
                </p>
            </p>
        </div>
    </div>
</template>
<style scoped>
    .events {
    /* background-color: #222; */
    /* border: .1em solid #333; */
    border-radius: 25px;
    min-width: 325px;
    max-width: 350px;
    }

    .link {
        border-radius: 25px;
        padding: .5rem;
        margin: .5rem;
        background-color: orange;
        color: #000;
        font-weight: bold;
    }

    div > span {
        padding: .5em;
    }
</style>