import React, { useState } from "react";
import styles from "./VolunteersPage.module.css";

function Volunteer({ name, role, since, email, phone, photo }) {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className={`${styles.profileboard} glassCard`}>
      <div className={styles.mainContent}>
        {!isExpanded ? (
          <div className={styles.basicInfo}>
            <h2>{name}</h2>
            <p><strong>Rôle :</strong> {role}</p>
            <p><strong>Membre depuis :</strong> {since}</p>
          </div>
        ) : (
          <div className={styles.expandedContent}>
            <div className={styles.profilePictureContainer}>
              <img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
            </div>
            <div className={styles.textInfo}>
              <div className={styles.basicInfo}>
                <h2>{name}</h2>
                <p><strong>Rôle :</strong> {role}</p>
                <p><strong>Membre depuis :</strong> {since}</p>
              </div>
              <div className={styles.contactInfo}>
                <p><strong>Email :</strong> {email}</p>
                <p><strong>Téléphone :</strong> {phone}</p>
              </div>
            </div>
          </div>
        )}
        <button
          className={`${styles.expandButton} glassCard`}
          onClick={toggleExpand}
        >
          {isExpanded ? "▲" : "▼"}
        </button>
        {isExpanded && (
          <div className="voirPlus">
            <a href="#" className={styles.voirPlus}>VOIR PLUS</a>
            </div>
        )}
      </div>
    </div>
  );
}

function VolunteerPage() {
  const volunteers = [
    {
      name: "LEBLOND Malo",
      role: "Président",
      since: "2019",
      email: "malo.leblond@example.com",
      phone: "08 67 87 32 21",
      photo: "../src/assets/react.svg",
    },
    {
      name: "DUPONT Jean",
      role: "Bénévole",
      since: "2020",
      email: "jean.dupont@example.com",
      phone: "06 12 34 56 78",
      photo: "../src/assets/react.svg",
    },
    {
      name: "MARTIN Sophie",
      role: "Bénévole",
      since: "2021",
      email: "sophie.martin@example.com",
      phone: "06 87 65 43 21",
      photo: "../src/assets/react.svg",
    },
    {
      name: "MARTIN Sophie",
      role: "Bénévole",
      since: "2021",
      email: "sophie.martin@example.com",
      phone: "06 87 65 43 21",
      photo: "../src/assets/react.svg",
    },
  ];

  return (
    <div className={styles.container}>
      {volunteers.map((volunteer, index) => (
        <Volunteer
          key={index}
          name={volunteer.name}
          role={volunteer.role}
          since={volunteer.since}
          email={volunteer.email}
          phone={volunteer.phone}
          photo={volunteer.photo}
        />
      ))}
    </div>
  );
}

export default VolunteerPage;