import { unmaskFragment } from "@/gql";
import {
  EventCategoryFragmentDefinition,
  EventFragment,
} from "@/lib/event";
import { ImageFragmentDefinition } from "@/lib/common";
import styles from "./eventHeader.module.scss";
import { ImageFigure } from "@/components/general/Image";
import { Icon } from "../general/Icon";

export const EventHeader = ({ event }: { event: EventFragment }) => {
  const featuredImage = unmaskFragment(
    ImageFragmentDefinition,
    event.featuredImage
  );
  const categories = unmaskFragment(
    EventCategoryFragmentDefinition,
    event.categories
  );

  return (
    <div className={styles.eventHeader}>
      <div className={styles.heading}>
        {/*<Breadcrumb link="/arrangementer" text="Arrangement" />*/}
        {categories.length > 0 && (
          <div className={styles.categories}>
            {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} target="_blank" className="button cta">
            <span>Kjøp billetter</span>
            <Icon type="tickets" />
          </a>
        )}
      </div>
      <div className={styles.image}>
        {featuredImage && (
          <ImageFigure
            src={featuredImage.url}
            alt={featuredImage.alt ?? ""}
            width={featuredImage.width}
            height={featuredImage.height}
            attribution={featuredImage.attribution}
            sizes="(max-width: 1000px) 100vw, 55vw"
          />
        )}
      </div>
    </div>
  );
};
