---
const { people, team } = Astro.props;
// Dummy data for now:
let filteredPeople = [
  {
    id: "guy-zyskind",
    name: "Guy Zyskind",
    caption:
      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
    country: "is",
    refs: {
      twitter: "GuyZys",
    },
    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
    thumbs: {
      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
      "128":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
      "400":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
    },
  },
  {
    id: "guy-zyskind",
    name: "Guy Zyskind",
    caption:
      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
    country: "is",
    refs: {
      twitter: "GuyZys",
    },
    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
    thumbs: {
      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
      "128":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
      "400":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
    },
  },
  {
    id: "guy-zyskind",
    name: "Guy Zyskind",
    caption:
      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
    country: "is",
    refs: {
      twitter: "GuyZys",
    },
    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
    thumbs: {
      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
      "128":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
      "400":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
    },
  },
  {
    id: "guy-zyskind",
    name: "Guy Zyskind",
    caption:
      "Founder of [Secret Network](https://scrt.network/), CEO [SCRT Labs](https://www.scrtlabs.com/)",
    country: "is",
    refs: {
      twitter: "GuyZys",
    },
    imageUrl: "https://data.web3privacy.info/img/people/guy-zyskind.jpg",
    thumbs: {
      "64": "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-64px.webp",
      "128":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-128px.webp",
      "400":
        "https://data.web3privacy.info/img/people/thumbs/guy-zyskind-400px.webp",
    },
  },
];

// NOTE: Uncomment this if you want to filter people dynamically based upon a specific parameter

// const filteredPeople = people
//   .filter((p) => !team.includes(p.id))
//   .filter((p) => p.imageUrl);

// Limit the number of members to 12 (2 rows with a max of 6 columns each)
const limitedPeople = filteredPeople.slice(0, 12);

function personLink(person) {
  return person.refs?.twitter
    ? `https://twitter.com/${person.refs.twitter}`
    : person.refs?.bsky
      ? `https://bsky.app/profile/${person.refs.bsky}`
      : "#";
}

function truncateCaption(caption) {
  if (!caption) return "";
  const words = caption.split(" ");
  if (words.length > 10) {
    return words.slice(0, 20).join(" ") + "...";
  }
  return caption;
}
---

<div
  class="grid place-items-center grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2"
>
  {
    limitedPeople.map((person) => (
      <div class=" max-w-xs w-full h-[340px] bg-transparent overflow-hidden p-1 space-y-1 mb-2">
        <a href={personLink(person)}>
          <img
            src={person.imageUrl}
            alt={person.name}
            class="w-full h-48 object-cover filter grayscale"
          />
        </a>
        <div class=" flex items-center justify-center  flex-col pt-8">
          <h3 class="text-lg font-bold">{person.name}</h3>
          {person.refs && person.refs.twitter && (
            <p class="text-sm text-gray-500">@{person.refs.twitter}</p>
          )}
          {/* <p class="text-sm">{truncateCaption(person.caption)}</p> */}
        </div>
      </div>
    ))
  }
</div>