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

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

    <div class="insta-feed-scroll flex-1 min-h-0">
      <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="shrink-0 px-2 py-1">
      <span
        class="block text-center px-3 py-1 bg-neutral-200 text-neutral-400 rounded text-xs cursor-not-allowed"
        aria-disabled="true"
        title="Boutique — bientôt disponible"
      >
        Boutique
      </span>
    </div>
  </section>
</template>

<style scoped>
.insta-feed-scroll {
  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>
