import React from "react";
import { Cell, Grid } from "@faceless-ui/css-grid";
import { Page } from "../../../payload-types";
import { BackgroundColor } from "../../BackgroundColor";
import { Gutter } from "../../Gutter";
import { CMSLink } from "../../Link";
import RichText from "../../RichText";

import classes from "./index.module.scss";

type Props = {
  ctaBackgroundColor?: "white" | "black";
  richText: {
    [k: string]: unknown;
  }[];
  links: {
    link: {
      type?: "reference" | "custom";
      newTab?: boolean;
      reference: {
        value: string | Page;
        relationTo: "pages";
      };
      url: string;
      label: string;
    };
    id?: string;
  }[];
  id?: string;
  blockName?: string;
  blockType: "cta";
};
export const CallToActionBlock: React.FC<Props> = ({
  ctaBackgroundColor,
  links,
  richText,
}) => {
  const oppositeBackgroundColor =
    ctaBackgroundColor === "white" ? "black" : "white";

  return (
    <Gutter>
      <BackgroundColor color={oppositeBackgroundColor}>
        <div className={classes.callToAction}>
          <Grid>
            <Cell cols={8} colsL={7} colsM={12}>
              <div>
                <RichText className={classes.richText} content={richText} />
              </div>
            </Cell>

            <Cell
              start={10}
              cols={3}
              startL={9}
              colsL={4}
              startM={1}
              colsM={12}
            >
              <div className={classes.linkGroup}>
                {(links || []).map(({ link }, i) => {
                  return <CMSLink key={i} {...link} />;
                })}
              </div>
            </Cell>
          </Grid>
        </div>
      </BackgroundColor>
    </Gutter>
  );
};