"use client";

import styles from "./eventItem.module.scss";
import Link from "next/link";
import Image from "../general/Image";
import {
  SingularEvent,
  EventFragment,
  getClosestOccurrence,
} from "@/lib/event";
import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";

export const EventItem = ({
  event,
  mode,
  size,
}: {
  event: SingularEvent | EventFragment;
  mode: "list" | "calendar";
  size?: "small" | "medium" | "large";
}) => {
  const nextOccurrence = getClosestOccurrence(event);
  const numOccurrences = event?.occurrences?.length ?? 0;

  return (
    <li
      className={`${styles.eventItem} ${
        size ? styles[size] : styles.large
      } linkItem`}
    >
      <div className={styles.image}>
        {event.featuredImage && (
          <Image
            src={event.featuredImage.url}
            alt=""
            width={0}
            height={0}
            sizes="20vw"
          />
        )}
      </div>
      <div className={styles.text}>
        <h1 className={styles.title}>{event.title}</h1>
        {mode === "list" && nextOccurrence && (
          <p className={styles.details}>
            {numOccurrences === 1 &&
              nextOccurrence?.start &&
              formatDate(nextOccurrence.start, commonDateFormat)}
            {numOccurrences > 1 && nextOccurrence?.start && (
              <span>
                <em>Neste:</em>{" "}
                {formatDate(nextOccurrence.start, commonDateFormat)}
              </span>
            )}
          </p>
        )}
        {mode === "calendar" &&
          "occurrence" in event &&
          event.occurrence?.start && (
            <p className={styles.details}>
              {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
            </p>
          )}
      </div>
      <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
        Mer om arrangementet {event.title}
      </Link>
    </li>
  );
};