import { PageSectionBlock as PageSectionBlockType } from "@/gql/graphql";
import styles from "./pageSection.module.scss";
import { Blocks } from "./Blocks";
import slugify from "@sindresorhus/slugify";

export const PageSectionBlock = ({
  block,
}: {
  block: PageSectionBlockType;
}) => {
  // TODO: add icon selection to model
  // TODO: there's a block.backgroundColor

  const anchor = slugify(block.title);

  return (
    <section className={styles.pageSection}>
      <div className={styles.anchor} id={anchor}></div>
      <div className={styles.sectionHeader}>
        <div className={styles.icon}>
          <img src="/assets/icons/neufneuf.svg" />
        </div>
        <h2>{block.title}</h2>
      </div>
      <Blocks blocks={block.body} />
    </section>
  );
};

export const PageSectionNavigationBlock = ({
  sections,
}: {
  sections: PageSectionBlockType[];
}) => {
  if (!sections.length) {
    return <></>;
  }
  return (
    <div className="anchorLinks">
      <span className="suphead">Hopp til</span>
      <ul>
        {sections.map((section) => {
          const anchor = slugify(section.title);

          return (
            <li key={anchor}>
              <a href={`#${anchor}`} className="button">
                {section.title}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
