import React from "react";
import Button from "../ui/button/button";
import styles from "./PendingMembers.module.css";

function pendingMembers() {
  const pendingMembers = [
    { name: "Antoine Ordonneau" },
    { name: "Giovanni Josserand" },
    { name: "Quentin T'Jampens" },
    { name: "Quentin T'Jampens" },
    { name: "Quentin T'Jampens" },
    { name: "Quentin T'Jampens" },
    { name: "Quentin T'Jampens" }
  ];

  const handleValidate = (name) => {
    console.log(`Valider ${name}`);
  };

  const handleReject = (name) => {
    console.log(`Refuser ${name}`);
  };

  return (
    <div className={`${styles.rightBlock} glassCard`}>
      <h2>Membres en attente de validation</h2>
      <div className={styles.membersContainer}>
        {pendingMembers.map((member, index) => (
          <div key={index} className={`glassCard ${styles.memberCard}`}>
            <p>{member.name}</p>
            <div className={styles.buttonGroup}>
              <Button onClick={() => handleValidate(member.name)} variant="primary">
                Valider
              </Button>
              <Button onClick={() => handleReject(member.name)} variant="danger">
                Refuser
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default pendingMembers;
