import { EventFragment } from "@/gql/graphql";
import { EventItem } from "./EventItem";
import styles from "./eventList.module.scss";
import { EventFilter } from "./EventFilter";

export const EventList = ({ events }: { events: EventFragment[] }) => {
  return (
    <div className={styles.events}>
      <EventFilter />
      <div className={styles.eventWrapper}>
        <div className={styles.displayOptions}>
          <button>Vis liste</button>
          <button>Vis kalender</button>
        </div>
        <ul className={styles.eventList}>
          {events.map((event) => (
            <EventItem key={event.id} event={event} />
          ))}
        </ul>
      </div>
    </div>
  );
};