import { EventFragment } from "@/gql/graphql";
import styles from "./eventHeader.module.scss";
import Image from "@/components/general/Image";
import { Pig } from "../general/Pig";

export const EventHeader = ({ event }: { event: EventFragment }) => {
  return (
    <div className={styles.eventHeader}>
      <div className={styles.text}>
        <h1 className={styles.title}>{event.title}</h1>
        <div className={styles.details}>
          <div>Facebook: {event.facebookUrl}</div>
          <div>Billettlenke: {event.ticketUrl}</div>
          <div>Ordinær pris: {event.priceRegular}</div>
          <div>Studentpris: {event.priceStudent}</div>
          <div>Medlemspris: {event.priceMember}</div>
        </div>
      </div>
      <div className={styles.image}>
        {event.featuredImage && (
          <Image
            src={event.featuredImage.url}
            alt=""
            width={event.featuredImage.width}
            height={event.featuredImage.height}
            sizes="100vw"
          />
        )}
        <div className={styles.pig}>
          <Pig type="logo" />
        </div>
      </div>
    </div>
  );
};