<template>
    <button class="note-row" @click="openNote(note.id)">
        <span class="date">{{ formatDate(note.createdAt) }}</span>
        <span class="title bold">{{ note.title }}</span>
    </button>
</template>

<script setup>
import useOpenNote from '@/composables/useOpenNote'
import { format } from 'fecha'

const props = defineProps({ note: Object })

const { openNote } = useOpenNote()

const formatDate = (date) => {
    const d = new Date(date)
    return format(d, 'MM/DD/YYYY')
}
</script>

<style lang="scss">
.note-row {
    grid-template-columns: auto 1fr;
    display: grid;
    width: 100%;
    gap: 20px;
    cursor: pointer;

    .title {
        width: calc(100% - 43.2px);
        position: relative;

        &::after {
            content: '(open)';
            position: absolute;
            bottom: 0;
            right: 0;
            transform: translateX(100%);
            font-weight: 700;
            opacity: 0;
        }
    }
    &:hover {
        color: var(--theme-accent);

        .title::after {
            opacity: 1;
        }
    }
}
</style>
