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

export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
  const featuredImage: any = venue.featuredImage;

  return (
    <li className={`${styles.venueItem} linkItem`}>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={0}
            height={0}
            sizes="20vw"
          />
        )}
      </div>
      <div className={styles.text}>
        <h1 className={styles.title}>{venue.title}</h1>
        <div className={styles.details}>
          Egner seg for:
          <br />
          <span className={styles.people}>50—115 personer</span>
          <br />
          <span className={styles.uses}>
            Konsert, foredrag, fest, debatt, teater, filmvisning
          </span>
        </div>
      </div>
      <Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
        Mer om lokalet {venue.title}
      </Link>
    </li>
  );
};
