import { VenueListItemFragment } from "@/gql/graphql";
import styles from "./venueItem.module.scss";
import Link from "next/link";
import { Image } from "@/components/general/Image";

export const VenueItem = ({
  venue,
  priority,
}: {
  venue: VenueListItemFragment;
  // above the fold: load the image right away
  priority?: boolean;
}) => {
  const featuredImage: any = venue.featuredImage;

  const { capacitySitting, capacityStanding, usedFor } = venue;
  let capacity = null;
  if (
    !isNaN(Number(capacitySitting)) &&
    capacitySitting &&
    !isNaN(Number(capacityStanding)) &&
    capacityStanding
  ) {
    capacity = `${capacitySitting}—${capacityStanding}`;
  }

  return (
    <li className={`${styles.venueItem} linkItem`}>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={0}
            height={0}
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 35vw"
            loading={priority ? "eager" : undefined}
            fetchPriority={priority ? "high" : undefined}
          />
        )}
      </div>
      <div className={styles.text}>
        <h1 className={styles.title}>{venue.title}</h1>
        {(capacity || usedFor) && (
          <div className={styles.details}>
            <strong>Passer for:</strong>
            <ul>
              {capacity && <li>{capacity} personer</li>}
              {usedFor && <li>{usedFor}</li>}
            </ul>
          </div>
        )}
      </div>
      <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
        Mer om lokalet {venue.title}
      </Link>
    </li>
  );
};