import React, { useState } from 'react';
import styles from './style.module.scss';
import arrow from '../../img/homePage/downArrow.png';

const TableMeets = ({ events }) => {
  const [isOpenMap, setIsOpenMap] = useState({});

  const toggleDropdown = (eventId) => {
    setIsOpenMap((prevIsOpenMap) => ({
      ...prevIsOpenMap,
      [eventId]: !prevIsOpenMap[eventId]
    }));
  };

  return (
    <div className={styles.meeting__container}>
      <ul className={styles.meeting__cards}>
        {events.map((event) => (
          <li key={event.id}>
            <div className={styles.meeting__card}>
              <span className={styles.date}>{event.date}</span>
              <span className={styles.time}>{event.time}</span>
              <span className={styles.title}>{event.title}</span>
              <div className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}><img className={styles.meeting__arrow} src={arrow} ></img></div>
              {isOpenMap[event.id] && (
                <div>
                  <span>{event.speaker}</span>
                  <img src={event.avatar} alt={event.speaker} />
                  <p>{event.description}</p>
                </div>
              )}
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TableMeets;