import React, { useState } from 'react';
import styles from './style.module.scss';
import logo from '../../img/homePage/downArrow.png';
import { Container, Grid, Button, Typography } from '@mui/material';
import { column } from 'stylis';
import arrow from '../../img/homePage/downArrow.png';


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

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

  return (


    // <Container className={styles.meeting__container}>
    //   <Grid sx={{display: 'flex', flexDirection: 'column'}} container className={styles.meeting__cards}>
    //     {events.map((event) => (

    //       <Grid item key={event.id}>
    //         <Container className={styles.meeting__card}>
    //           <Typography className={styles.date}>{event.date}</Typography>
    //           <Typography className={styles.time}>{event.time}</Typography>
    //           <Typography className={styles.title}>{event.title}</Typography>
    //           <Button className={styles.meeting__button} onClick={() => toggleDropdown(event.id)}>
    //             <img src={logo} alt="Logo" />
    //           </Button>

    //       <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] && (
    //             <Container>
    //               <Typography>{event.speaker}</Typography>
    //               <img src={event.avatar} alt={event.speaker} />
    //               <Typography>{event.description}</Typography>
    //             </Container>
    //           )}
    //         </Container>
    //       </Grid>
    //     ))}
    //   </Grid>
    // </Container>
    <></>
  );
};

export default TableMeets;