Avatar stack

"use client";
import styles from "./AvatarStack.module.css";
import { useState } from "react";
const people = [
  {
    name: "Dianne",
    initials: "DI",
    color: "#d9cbe6",
    role: "Design direction",
  },
  { name: "Alex", initials: "AL", color: "#cbd8c0", role: "Product design" },
  { name: "Sam", initials: "SA", color: "#edcdb7", role: "Engineering" },
  { name: "Jo", initials: "JO", color: "#c9dfe8", role: "Research" },
];
export default function AvatarStack({ members = people, onSelect }) {
  const [selected, setSelected] = useState(null);
  return (
    <div className={styles.root}>
      <p className={styles.label}>Good work is a team sport.</p>
      <div className={styles.stack}>
        {members.map((person, index) => (
          <button
            key={person.name}
            type="button"
            aria-label={`View ${person.name}`}
            aria-pressed={selected === person.name}
            style={{ "--avatar": person.color, "--order": index }}
            onClick={() => {
              setSelected(person.name);
              onSelect?.(person);
            }}
          >
            <span className={styles.name}>{person.name}</span>
            <span aria-hidden="true">{person.initials}</span>
          </button>
        ))}
      </div>
      <p className={styles.selected} role="status">
        {selected
          ? `${selected} · ${members.find((person) => person.name === selected)?.role}`
          : `${members.length} people, one shared direction.`}
      </p>
    </div>
  );
}