<script setup lang="ts">
const images = [
  "https://picsum.photos/640/640?random=1",
  "https://picsum.photos/640/800?random=2",
  "https://picsum.photos/800/640?random=3",
  "https://picsum.photos/1000/640?random=4",
  "https://picsum.photos/640/400?random=5",
  "https://picsum.photos/640/800?random=6",
  "https://picsum.photos/810/640?random=7",
  "https://picsum.photos/760/640?random=8",
  "https://picsum.photos/640/900?random=9",
  "https://picsum.photos/1000/640?random=10",
  "https://picsum.photos/640/600?random=11",
];

const columnCount = ref(3);

const getColumnImages = (columnNumber: number) =>
  images.filter((_, index) => index % columnCount.value === columnNumber - 1);

const updateColumns = () => {
  if (window.innerWidth < 768) {
    columnCount.value = 1;
  } else if (window.innerWidth < 1152) {
    columnCount.value = 2;
  } else {
    columnCount.value = 3;
  }
};

onMounted(() => {
  updateColumns();
  window.addEventListener("resize", updateColumns);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateColumns);
});
</script>

<template>
  <div
    class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono,monospace]"
  >
    <div class="flex gap-6">
      <div
        v-for="col in columnCount"
        :key="col"
        class="flex-1 flex flex-col gap-6"
      >
        <header v-if="col === 1" class="pr-2 pb-6">
          <UButton
            icon="i-lucide-arrow-left"
            size="md"
            color="neutral"
            variant="link"
            :ui="{
              base: 'px-0 text-neutral-600 hover:text-neutral-400',
              leadingIcon: 'size-4',
            }"
            >Back to Home</UButton
          >

          <h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
          <p class="text-neutral-600 text-sm mt-2 w-4/5">
            Started on March 7th, 2025. I love macro photography of insects and
            flowers.
          </p>
        </header>
        <div
          v-for="(image, idx) in getColumnImages(col)"
          :key="idx"
          class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
        >
          <img
            :src="image"
            class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
          />
        </div>
      </div>
    </div>
  </div>
</template>
