<template>
    <v-card class="d-flex flex-column" height="100%">
        <v-card-title>
            <h2 class="title primary--text">{{ title }}</h2>
        </v-card-title>
        <v-card-text> Last updated {{ prettyDate }} </v-card-text>
        <v-card-actions>
            <TagsGroup :tags="tags" />
            <v-spacer />
            <v-btn text color="accent" @click="$router.push(`/notes/${uuid}`)"
                >View</v-btn
            >
        </v-card-actions>
    </v-card>
</template>

<script>
import { format } from 'timeago.js'
import TagsGroup from '@/components/TagsGroup'

export default {
    name: 'NoteCard',
    components: { TagsGroup },
    props: {
        uuid: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        tags: {
            type: Array,
            default: () => [],
        },
        updatedAt: {
            type: String,
            default: null,
        },
    },
    computed: {
        prettyDate() {
            return format(this.updatedAt)
        },
    },
}
</script>
