import { graphql } from "@/gql";
import { type PageSectionBlockFragment } from "@/gql/graphql";
import styles from "./pageSection.module.scss";
import { Blocks } from "./Blocks";
import slugify from "@sindresorhus/slugify";
import { DecorativeIcon } from "../general/Icon";

const PageSectionBlockFragmentDefinition = graphql(`
  fragment PageSectionBlock on PageSectionBlock {
    title
    backgroundColor
    icon
    body {
      id
      blockType
    }
  }
`);

export const PageSectionBlock = ({
  block,
}: {
  block: PageSectionBlockFragment;
}) => {
  const anchor = slugify(block.title);

  return (
    <section
      className={styles.pageSection}
      data-background-color={block.backgroundColor}
    >
      <div className={styles.anchor} id={anchor}></div>
      <div className={styles.sectionHeader}>
        <div className={styles.icon}>
          {block.icon && <DecorativeIcon type={block.icon} />}
        </div>
        <h2>{block.title}</h2>
      </div>
      <Blocks blocks={block.body} />
    </section>
  );
};

export const PageSectionNavigationBlock = ({
  sections,
}: {
  sections: PageSectionBlockFragment[];
}) => {
  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>
  );
};