<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>
    <td>
        <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> 
    </td>
    <td>
        {{  item.text }}

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

        <p class="border p-2" 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>
    </td>
    <td class="text-center w-72">
        <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>
    </td>
</template>
<style scoped>
    td {
        padding: 1rem;
    }

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

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