<template>
  <div class="flex flex-col gap-y-4">
    <h2 class="text-xl font-bold font-display text-zinc-100">{{ title }}</h2>
    <div class="flex flex-row flex-wrap justify-left gap-4">
      <component
        :is="entry.platform === 'drop' ? resolveComponent('NuxtLink') : 'a'"
        v-for="entry in entries"
        :key="`${entry.platform}-${entry.id}`"
        v-bind="
          entry.platform === 'drop'
            ? { to: entry.deepLink }
            : { href: entry.deepLink, target: '_blank', rel: 'noopener' }
        "
        class="group relative flex-1 min-w-42 max-w-48 h-64 rounded-lg overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-lg"
      >
        <div class="absolute inset-0">
          <img
            v-if="entry.coverUrl"
            :src="entry.coverUrl"
            class="w-full h-full object-cover brightness-[90%]"
            :alt="entry.name"
          />
          <div
            v-else
            class="w-full h-full bg-zinc-800 flex items-center justify-center text-zinc-600 text-xs px-2 text-center"
          >
            {{ entry.name }}
          </div>
          <div
            class="absolute inset-0 bg-gradient-to-t from-zinc-950/80 via-zinc-950/0 to-transparent"
          />
        </div>
        <div class="absolute bottom-0 left-0 w-full p-3">
          <h3
            class="text-zinc-100 text-sm font-bold font-display line-clamp-2 group-hover:text-white transition-colors"
          >
            {{ entry.name }}
          </h3>
          <p class="text-zinc-400 text-xs">
            {{ formatSeconds(entry.seconds) }}
          </p>
        </div>
      </component>
    </div>
  </div>
</template>

<script setup lang="ts">
interface PlaytimeRailEntry {
  id: string;
  platform: "drop" | "romm";
  name: string;
  coverUrl: string | null;
  deepLink: string;
  seconds: number;
  lastPlayedAt: string;
}

defineProps<{
  title: string;
  entries: PlaytimeRailEntry[];
}>();

function formatSeconds(seconds: number): string {
  const hours = seconds / 3600;
  if (hours < 1) return `${Math.round(seconds / 60)}m`;
  return `${Math.round(hours * 10) / 10}h`;
}
</script>
