import { EventListItemFragment } from "@/gql/graphql";
import { EventItem } from "./EventItem";
import styles from "./featuredEvents.module.scss";
import { SectionHeader } from "../general/SectionHeader";
import { SectionFooter } from "../general/SectionFooter";

export const FeaturedEvents = ({ events }: { events: EventListItemFragment[] }) => {
  return (
    <section className={styles.featuredEvents}>
      <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
      <ul className={styles.eventList}>
        {events.slice(0, 3).map((event) => (
          <EventItem
            key={event.id}
            event={event}
            mode="list"
            imageLoading="eager"
            imageFetchPriority="high"
          />
        ))}
      </ul>
      <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />
    </section>
  );
};
