import { AssociationFragment } from "@/gql/graphql";
import { Image } from "@/components/general/Image";
import styles from './associationHeader.module.scss';
import { Breadcrumb } from "../general/Breadcrumb";
import { RichText } from "@/components/general/RichText";
import { Icon } from "../general/Icon";

export const AssociationHeader = ({
  association,
}: {
  association: AssociationFragment;
}) => {
  return (
    <section className={`${styles.associationHeader} ${association.logo && styles.hasLogo} ${(association.logo || association.lead) && styles.wide}`}>
      <div>
          <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
          <h1>{association.title}</h1>
          {association.lead && (
            <div className="lead">
              <RichText content={association.lead} />
            </div>
          )}
          {association.websiteUrl && (
            <a className="button" href={association.websiteUrl} target="_blank">
              <span>Besøk nettside</span>
              <Icon type="externalLink" />
            </a>
          )}
        </div>
        {association.logo && (
          <Image
            src={association.logo.url}
            alt={`Logoen til ${association.title}`}
            width={association.logo.width}
            height={association.logo.height}
            sizes="40vw"
            className={styles.logo}
          />
        )}
    </section>
  );
};
