import React, { ReactNode } from "react";
import classNames from "classnames";

import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

import { Text } from "@arc-ui/components/Text";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { Image, type ImageProps } from "@arc-ui/components/Image";
import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
import { Columns, ColumnsCol } from "@arc-ui/components/Columns";

import styles from "./SectionHeading.module.css";

export const SectionHeading: React.FC<SectionHeadingProps> = ({
  heading,
  content,
  id,
  image,
  isHeadingWordWrap,
  isPadded = false,
  headingLevel = "2",
  isCentered = false,
  ...props
}) => (
  <Columns>
    <ColumnsCol spanM={isPadded ? 9 : 12}>
      <div
        className={classNames({
          [styles["sectionHeading--isCentered"]]: isCentered,
        })}
        {...filterAttrs(props)}
      >
        <div
          className={classNames({
            [styles["sectionHeading--hasImage"]]: image,
          })}
        >
          {image && <Image {...image} width={68} fit="cover" />}
          <Heading
            level={headingLevel}
            id={id}
            size="xl"
            isWordWrap={isHeadingWordWrap}
          >
            {heading}
          </Heading>
        </div>
        {content && (
          <div className={styles[`sectionHeading-content`]}>
            <VerticalSpace size="24" />
            <Text size="l" elementType="p">
              {content}
            </Text>
          </div>
        )}
        <VerticalSpace size="40" />
      </div>
    </ColumnsCol>
  </Columns>
);

export interface SectionHeadingProps {
  /**
   * heading for `SectionHeading`.
   */
  heading: string;

  /**
   * Adds padding to `SectionHeading`.
   */
  isPadded?: boolean;

  /**
   * Determine a heading level for `SectionHeading`.
   */
  headingLevel?: HeadingLevel;

  /**
   * Word wrap behavior for the heading
   */
  isHeadingWordWrap?: boolean;

  /**
   * Text content for `SectionHeading`.
   */
  content?: string | ReactNode;
  /**
   * Id content for `SectionHeading`.
   */
  id?: string;

  /**
   * Header image for the `SectionHeading`.
   */
  image?: ImageProps;
  /**
   * Is Heading centered. Only intended to be used when no content is provided and the heading is alone.
   */
  isCentered?: boolean;
}