<script setup lang="ts">
defineProps<{
  account: string;
  accountUrl: string;
  feedImages: string[]; // ordonné du plus récent (haut) au plus ancien (bas)
}>();
</script>

<template>
  <section class="border-b border-neutral-200 last:border-b-0">
    <header class="px-4 py-3 flex items-center justify-between">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
        class="font-medium text-sm hover:underline"
      >
        {{ account }}
      </a>
    </header>

    <div class="insta-feed-scroll">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
        :aria-label="`Voir le compte Instagram ${account}`"
      >
        <img
          v-for="(src, i) in feedImages"
          :key="i"
          :src="src"
          alt=""
          loading="lazy"
          class="block w-full feed-img"
        />
      </a>
    </div>

    <div class="flex gap-1.5 px-4 py-3">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
        class="flex-1 text-center px-3 py-1.5 bg-neutral-900 text-white rounded-lg text-xs"
      >
        Compte Insta
      </a>
      <span
        class="flex-1 text-center px-3 py-1.5 bg-neutral-200 text-neutral-400 rounded-lg text-xs cursor-not-allowed"
        aria-disabled="true"
        title="Boutique — bientôt disponible"
      >
        Boutique
      </span>
    </div>
  </section>
</template>

<style scoped>
.insta-feed-scroll {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.insta-feed-scroll::-webkit-scrollbar {
  width: 6px;
}
.insta-feed-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
.insta-feed-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.feed-img + .feed-img {
  margin-top: 2px;
}
</style>
