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

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

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

type EventItemProps = {
  eventGroup: EventGroup;
};

export default function EventItem({ eventGroup }: EventItemProps) {

  const navigate = useNavigate();

  return (
    <div
      key={eventGroup.date}
      className={`${styles.eventGroup} glassBorder`}
      onClick={() => navigate(`/events/${eventGroup.id}`)}
    >
      <div className={styles.eventTitle}>
        <p className={styles.title}>{eventGroup.name}</p>
        <p>{formatDateLetter(eventGroup.start)}</p>
      </div>
    </div>
  );
}