import { EventFragment } from "@/gql/graphql";
import { EventItem } from "./EventItem";
import styles from "./upcomingEvents.module.scss";
import Link from "next/link";

export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
  return (
    <section className={styles.upcomingWrapper}>
      <h2 className="suphead">Denne uka på Chateau Neuf</h2>
      <ul className={styles.eventList}>
        {events.map((event) => (
          <EventItem key={event.id} event={event} mode="list" size="medium" />
        ))}
        <li>
          <Link href="/arrangementer?mode=calendar">Vis kalender &rarr;</Link>
        </li>
      </ul>
    </section>
  );
};