<template>
	<div class="panel">
		<div class="header">
		    <!-- <p class="label">Braindrops #{{ String(index + 1).padStart(2, '0') }}</p> -->
			<router-link class="label" to="/">Braindrops</router-link>
		</div>

		<div class="content">
			 <div v-if="drop.date" class="date meta-item label">
				<span class="meta-value">{{ formattedDate }}</span>
			</div>

			 <!-- <div v-if="drop.tags && drop.tags.length" class="tags">
				<span v-for="tag in drop.tags" :key="tag" class="tag">{{ tag }}</span>
			</div> -->

			<h1 class="name h2">{{ displayTitle }}</h1>

			<rich-text v-if="drop.description" class="description" :content="drop.description" />
		</div>

		<div class="btn-wrap">
			<btn @click="emit('previous')" :disabled="!previousActive">Last Drop</btn>
			<btn @click="emit('next')" :disabled="!nextActive">Next Drop</btn>
		</div>
	</div>
</template>

<script setup>
import RichText from '@shared/RichText.vue';
import { format, parse } from 'fecha'
import Btn from '@shared/Btn.vue'
import { computed } from 'vue'

const props = defineProps({
  drop: Object,
  index: Number,
	previousActive: Boolean,
	nextActive: Boolean,
});

const emit = defineEmits(['previous', 'next'])

const displayTitle = computed(() => {
	if (props.drop.title) return props.drop.title

	// Fallback: format name as title
	return props.drop.name
		?.split('-')
		?.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
		.join(' ')
})

const formattedDate = computed(() => {
    if (!props.drop.date) return ''

    const [year, month, day] = props.drop.date.split('-')
    const date = new Date(year, month - 1, day)

	return format(date, 'MMMM Do, YYYY')
})
</script>

<style lang="scss">
.panel {
    background: var(--theme-bg);
    border-radius: rs(10px);
    padding: var(--layout-margin);
    grid-template-rows: auto 1fr auto;
    display: grid;
    gap: rs(30px);

    .header {
        text-align: center;
    }
    .content {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: rs(15px);

        .name {
            margin-bottom: rs(5px);
        }
        .description, .date {
            color: var(--theme-grey);
        }
        .description {
            text-align: left;
            max-width: rs(400px);
            margin: 0 auto;

            a {
                word-break: break-word;
            }
        }
        .meta-item {
            font-size: rs(12px);

            .meta-label {
                opacity: 0.7;
                margin-right: rs(8px);
            }

            .meta-value {
                opacity: 0.9;
            }
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: rs(8px);
            justify-content: center;

            .tag {
                background: rgba(255, 255, 255, 0.1);
                padding: rs(4px) rs(12px);
                border-radius: rs(12px);
                font-size: rs(11px);
                text-transform: lowercase;
            }
        }
    }
    .btn-wrap {
        grid-template-columns: 1fr 1fr;
        gap: rs(10px);
        display: grid;

        .btn {
            text-align: center;
        }
    }
}
</style>
