import styles from "./EventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
import { useState } from "react";

type Task = {
  name: string;
  description: string;
  start: string | Date;
  end: string | Date;
};

type EventGroup = {
  date: string;
  name: string;
  start: string | Date;
  tasks: Task[];
};

type EventItemProps = {
  eventGroup: EventGroup;
};

export default function EventItem({ eventGroup }: EventItemProps) {
  const [isVisible, setIsVisible] = useState<boolean>(false);

  return (
    <div
      key={eventGroup.date}
      className={`${styles.eventGroup} glassBorder`}
      onClick={() => setIsVisible(!isVisible)}
    >
      <div className={styles.eventTitle}>
        <p className={styles.title}>{eventGroup.name}</p>
        <p>{formatDateLetter(eventGroup.start)}</p>
      </div>

      {isVisible && (
        <ul className={styles.eventDetails}>
          {eventGroup.tasks.map((task, i) => (
            <li key={i} className={styles.eventTasks}>
              <p>
                - {task.name} - {task.description}
              </p>
              <p>
                {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
              </p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/*import styles from "./eventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.ts";
import { useState } from "react";

export default function EventItem({ eventGroup }) {

    const [isVisible, setIsVisible] = useState(false);

    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
        <div className={styles.eventTitle}>
            <p className={styles.title}>{eventGroup.name}</p>
            <p>{formatDateLetter(eventGroup.start)}</p>
        </div>
        {isVisible &&
            <ul className={styles.eventDetails}>
                {eventGroup.tasks.map((task, i) => (
                    <li key={i} className={styles.eventTasks}>
                        <p>- {task.name} - {task.description}</p>
                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
                    </li>
                ))}
            </ul>
        }
    </div>
}
*/