<script setup lang="ts">
import type { Memory } from '../api/client'
import PolaroidCard from './PolaroidCard.vue'

defineProps<{
  memories: Memory[]
}>()

function formatDate(d: string) {
  const [y, m, day] = d.split('-')
  return `${y} · ${m} · ${day}`
}
</script>

<template>
  <div class="relative mx-auto max-w-lg px-4 pb-24 pt-4 sm:px-6">
    <div
      class="pointer-events-none absolute inset-y-0 left-0 w-1/2 bg-gradient-to-br from-lokta-blush/20 via-transparent to-transparent"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute inset-y-0 right-0 w-1/2 bg-gradient-to-bl from-lokta-teal/15 via-transparent to-transparent"
      aria-hidden="true"
    />
    <div
      class="pointer-events-none absolute inset-0 nepal-fiber opacity-[0.12] mix-blend-multiply"
      aria-hidden="true"
    />
    <svg
      class="pointer-events-none absolute bottom-0 left-1/2 top-0 z-0 w-5 -translate-x-1/2 overflow-visible text-rose-soft/45"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path
        d="M10 0 Q14 120 8 240 T10 480 T8 720 T10 960 T9 1200"
        fill="none"
        stroke="currentColor"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-dasharray="5 10"
        vector-effect="non-scaling-stroke"
      />
    </svg>
    <ol class="relative z-[1] space-y-16 sm:space-y-20">
      <li
        v-for="(m, i) in memories"
        :key="m.id"
        class="relative flex flex-col gap-3"
      >
        <div
          class="flex items-center justify-center gap-2 text-sm text-rose-deep"
        >
          <span
            class="inline-flex h-3 w-3 shrink-0 rounded-full bg-rose-soft shadow ring-2 ring-white"
          />
          <time
            class="font-hand text-xl tracking-wide"
            :datetime="m.date"
          >{{ formatDate(m.date) }}</time>
        </div>
        <div
          class="flex w-full"
          :class="i % 2 === 0 ? 'justify-start pr-8 sm:pr-14' : 'justify-end pl-8 sm:pl-14'"
        >
          <PolaroidCard :memory="m" :index="i" />
        </div>
      </li>
    </ol>
  </div>
</template>
