import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
import Link from "next/link";
import { Image } from "@/components/general/Image";
import styles from "./featuredBlock.module.scss";

// the 'text' field has been aliased to 'featuredBlockText' and i'm
// using codegen the wrong way. let's specify the field here and move on
type FeaturedBlockTypeWithAlias = FeaturedBlockType & {
  featuredBlockText: string;
};

export const FeaturedBlock = ({
  block,
}: {
  block: FeaturedBlockTypeWithAlias;
}) => {
  const image = !!block.featuredImageOverride
    ? block.featuredImageOverride
    : null;
  // TODO: fetch image from target page

  return (
    <div
      className={styles.featuredBlock}
      data-background-color={block.backgroundColor ?? ""}
    >
      <div className={styles.text}>
        <h2>{block.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: block.featuredBlockText }} />
        <Link href={block.featuredPage.url ?? "#"}>
          {block.linkText} &rarr;
        </Link>
      </div>
      {image && (
        <div className={styles.image}>
          <Image
            src={image.url}
            alt={image.alt ?? ""}
            width={image.width}
            height={image.height}
            sizes="(max-width: 800px) 100vw, 50vw"
          />
        </div>
      )}
      {!image && <div className={styles.placeholderImage} />}
    </div>
  );
};