import { graphql, unmaskFragment } from "@/gql";
import { type SponsorFragment } from "@/gql/graphql";
import { Image } from "../general/Image";
import { ImageFragmentDefinition } from "@/lib/common";
import { RichText } from "@/components/general/RichText";
import styles from "./sponsorList.module.scss";

export const SponsorFragmentDefinition = graphql(`
  fragment Sponsor on SponsorBlock {
    id
    name
    logo {
      ...Image
    }
    text
    website
  }
`);

const SponsorItem = ({ sponsor }: { sponsor: SponsorFragment }) => {
  const { name, logo: maskedLogo, website, text } = sponsor;
  const logo = unmaskFragment(ImageFragmentDefinition, maskedLogo);
  return (
    <li className={styles.sponsorItem}>
      <div className={styles.image}>
        {logo && (
          <Image
            src={logo.url}
            alt={`Logoen til ${name}`}
            width={logo.width}
            height={logo.height}
            sizes="20vw"
          />
        )}
      </div>
      <div className={styles.text}>
        <h2>{name}</h2>
        {text && (
          <div className={styles.sponsorText}>
            <RichText content={text} />
          </div>
        )}
        {website && (
          <p className={styles.website}>
            <a href={website} target="_blank" rel="noopener">
              Besøk nettside
            </a>
          </p>
        )}
      </div>
    </li>
  );
};

export const SponsorList = ({ sponsors }: { sponsors: SponsorFragment[] }) => {
  return (
    <section className={styles.sponsorList}>
      <ul>
        {sponsors.map((sponsor) => (
          <SponsorItem key={sponsor.name} sponsor={sponsor} />
        ))}
      </ul>
    </section>
  );
};
