import React from "react";

import { ArcSizeBreakpointsL, ArcSizeBreakpointsM } from "@arc-ui/tokens-arc";

import {
  HeadingLevel,
  useMediaQuery,
} from "@arc-ui/components/use-media-query";

import { MultiLineText } from "../../../../internal/MultiLineText";

import {
  SectionHeading,
  type SectionHeadingProps,
} from "../../../../components/SectionHeading";

import { type CopyLeadButton, type CopyLeadListItem } from "../../types";

import { IconList } from "../../components/IconList";
import { Button } from "../../components/Button/Button";
import { Container } from "../../components/Container";
import { Column } from "../../components/Column";
import { getListHeadingLevel } from "../../utils/getListHeadingLevel";

export const ContentTemplate: React.FC<ContentTemplateProps> = ({
  button,
  id,
  heading,
  headingLevel,
  isHeadingWordWrap,
  listItems,
  content,
}) => {
  const isMinWidthArcBreakpointM = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsM})`,
  );

  const isMinWidthArcBreakpointL = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsL})`,
  );

  const listHeadingLevel = getListHeadingLevel(headingLevel);

  return (
    <Container type="content" alignment="top">
      <Column>
        <SectionHeading
          id={id}
          heading={heading}
          headingLevel={headingLevel}
          isHeadingWordWrap={isHeadingWordWrap}
          content={<MultiLineText size="l" text={content} />}
        />

        {button && isMinWidthArcBreakpointM && <Button {...button} />}
      </Column>
      <Column>
        <IconList
          listItems={listItems}
          isLgScreen={isMinWidthArcBreakpointL}
          headingLevel={listHeadingLevel}
        />

        {button && !isMinWidthArcBreakpointM && <Button {...button} />}
      </Column>
    </Container>
  );
};

interface ContentTemplateProps extends SectionHeadingProps {
  content: string;
  listItems: CopyLeadListItem[];
  button?: CopyLeadButton;
  headingLevel: HeadingLevel;
}