import { EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import { Image } from "@/components/general/Image";
import { Breadcrumb } from "../general/Breadcrumb";
import Icon from "../general/Icon";

export const EventHeader = ({ event }: { event: EventFragment }) => {
  // TODO: where should we show image attribution for the featured image?

  const featuredImage: any = event.featuredImage;

  return (
    <div className={styles.eventHeader}>
      <div className={styles.heading}>
        {/*<Breadcrumb link="/arrangementer" text="Arrangement" />*/}
        {event.categories.length > 0 && (
          <div className={styles.categories}>
            {event.categories.map(category => (
              <div key={category.name} className="tag">{category.name}</div>
            ))}
          </div>
        )}
        <h1 className={styles.title}>{event.title}</h1>
        <p className={styles.details}>{event.subtitle}</p>
        {event.ticketUrl && (
          <a href={event.ticketUrl} className="button cta">
            <span>Kjøp billetter</span>
            <Icon type="tickets" />
          </a>
        )}
      </div>
      <div className={styles.image}>
        {featuredImage && (
          <Image
            src={featuredImage.url}
            alt={featuredImage.alt}
            width={featuredImage.width}
            height={featuredImage.height}
            sizes="100vw"
          />
        )}
      </div>
    </div>
  );
};
