import { SponsorBlock } from "@/gql/graphql";
import { Blocks } from "../blocks/Blocks";
import { Image } from "../general/Image";
import styles from "./sponsorList.module.scss";

const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
  const { name, logo, website, text } = sponsor;
  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 && (
          <p
            className={styles.sponsorText}
            dangerouslySetInnerHTML={{ __html: text }}
          />
        )}
        {website && (
          <p className={styles.website}>
            <a href={website} target="_blank" rel="noopener">
              Besøk nettside
            </a>
          </p>
        )}
      </div>
    </li>
  );
};

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