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

export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {
  return (
    <div className={styles.venueInfo}>
      <table>
        <tbody>
          <tr>
            <th>Etasje</th>
            <td>{venue.floor}</td>
          </tr>
          <tr>
            <th>Branntillatelse for</th>
            <td>{venue.capacityLegal}</td>
          </tr>
          <tr>
            <th>Stående</th>
            <td>{venue.capacityStanding}</td>
          </tr>
          <tr>
            <th>Sittende</th>
            <td>{venue.capacitySitting}</td>
          </tr>
          <tr>
            <th>Bruk</th>
            <td>{venue.usedFor}</td>
          </tr>
          <tr>
            <th>Bar</th>
            <td>{venue.capabilityBar}</td>
          </tr>
          <tr>
            <th>Lyd</th>
            <td>{venue.capabilityLighting}</td>
          </tr>
          <tr>
            <th>Lys</th>
            <td>{venue.capabilityLighting}</td>
          </tr>
          <tr>
            <th>A/V</th>
            <td>{venue.capabilityAudioVideo}</td>
          </tr>
        </tbody>
      </table>
      {venue.techSpecsUrl && (
        <a
          href={venue.techSpecsUrl}
          target="_blank"
          className="button secondary"
        >
          <span>Tekniske spesifikasjoner</span>
          <Icon type="doc" />
        </a>
      )}
    </div>
  );
};