<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 px-4 pb-6 m-2" style="padding-top: revert-layer;">
        <div class="p-2">
            <span class="float-left text-xs">
                #{{ item.id }} | {{  format_date(item.created_at) }}
            </span>
            <span class="float-right text-right text-xs" style="">
                <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> 
            </span>
        </div>
        <br/>
        <div class="tcenter p-1">
              {{  item.text.slice(0,256) }}

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

              <p class="border" v-if="item.rt_text != 'blank'">
                {{ item.rt_text }}
                <p v-if="item.rt_link != 'blank'">
                  <a :href="item.rt_link">RT Link</a> 
                </p>
              </p>
        </div>
        <div class="p-2">
            <div v-if="item.published" style="float:left;">
                <a :href="item.pub_link">
                    📝 {{ item.platform }}
                </a>
                
            </div> 
            <div v-else="!item.published" style="float:left;">
                ✍️
            </div> 
            <!-- <div style="float:right;">
                <span v-if="item.likes > 0">👍{{ item.likes }} </span>
                <span v-if="item.replies > 0">↩️{{ item.replies }} </span>
                <span v-if="item.quotes > 0">💭{{ item.quotes }} </span>
                <span v-if="item.reposts >0">⏩{{ item.reposts }} </span>
            </div>  -->

        </div>
    </div>
</template>
<style scoped>
    .events {
    /* background-color: #222; */
    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;
        }
    }

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

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