<template>
    <v-card
        class="d-flex flex-column"
        :class="{ hover: hover }"
        height="100%"
        :color="hover ? 'blue lighten-3' : 'white'"
        :elevation="hover ? 12 : 2"
    >
        <div class="mb-auto">
            <v-card-title>{{ title }}</v-card-title>

            <div class="tags">
                <v-chip
                    v-for="tag in tags"
                    :key="tag"
                    active
                    color="secondary"
                    >{{ tag }}</v-chip
                >
            </div>
        </div>

        <div v-if="updatedAt" class="mt-auto">
            <v-divider />
            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
        </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>
