<template>
    <v-card
        class="d-flex flex-column"
        :class="{ hover: hover }"
        d
        height="100%"
        :color="hover ? 'blue lighten-4' : ''"
        :elevation="hover ? 12 : 2"
    >
        <div class="mb-auto">
            <v-list-item three-line>
                <v-list-item-content>
                    <div class="overline mb-4">
                        Last updated {{ updatedAt }}
                    </div>
                    <v-list-item-title class="headline mb-1">
                        <h2 class="title primary--text">{{ title }}</h2>
                    </v-list-item-title>
                </v-list-item-content>
            </v-list-item>
            <v-card-actions>
                <div class="tags">
                    <v-chip
                        v-for="tag in tags"
                        :key="tag"
                        active
                        color="secondary"
                    >
                        {{ tag }}
                    </v-chip>
                </div>
            </v-card-actions>
        </div>
    </v-card>
</template>

<script>
export default {
    name: 'Note',
    props: {
        title: {
            type: String,
            required: true,
        },
        tags: {
            type: Array,
            default: () => [],
        },
        hover: {
            type: Boolean,
            default: false,
        },
        updatedAt: {
            type: String,
            default: null,
        },
    },
}
</script>

<style>
.tags {
    padding: 16px;
}

.tags .v-chip {
    margin: 4px 8px 4px 0;
}

.v-card.hover {
    cursor: pointer;
}
</style>
