import React from "react";
import { useMediaQuery } from "@arc-ui/components/use-media-query";
import { ButtonV2, type ButtonV2Props } from "@arc-ui/components/ButtonV2";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { BtIconArrowRightFill } from "@arc-ui/icons/BtIconArrowRightFill";

import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
import { HighlightList } from "./components/HighlightList/HighlightList";
import { type HighlightListItem } from "./types";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

/**
 * Use `Highlights` to give supporting information about a page or proposition. I
 * t can be used to call out key benefits in bullet points, or link.
 * Both two and three column options are available.
 */
export const Highlights: React.FC<HighlightsProps> = ({
  heading,
  headingLevel,
  id,
  isHeadingWordWrap,
  content,
  listItems,
  columns = "2",
  cta,
  ...props
}) => {
  const isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");

  return (
    <div {...filterAttrs(props)}>
      <SectionHeading
        isPadded
        id={id}
        data-testid="highlights-header"
        heading={heading}
        headingLevel={headingLevel}
        isHeadingWordWrap={isHeadingWordWrap}
        content={content}
      />

      <HighlightList
        listItems={listItems}
        columns={columns}
        isSmallIcon={isMaxWidthArcBreakpointXs}
        headingLevel={headingLevel}
      />

      {cta && (
        <>
          <VerticalSpace size="24" />
          <ButtonV2
            label={cta.label}
            href={cta.href}
            onClick={cta.onClick}
            target={cta.target}
            size="m"
            ariaLabel={cta.ariaLabel}
            buttonStyle={cta.buttonStyle}
            icon={
              cta.buttonStyle === "compact"
                ? (cta.icon ?? BtIconArrowRightFill)
                : undefined
            }
            iconActive={
              cta.buttonStyle === "compact"
                ? (cta.iconActive ?? BtIconArrowRightFill)
                : undefined
            }
            iconPosition={cta.iconPosition ?? "beforeText"}
          />
        </>
      )}
    </div>
  );
};

export interface HighlightsProps extends Omit<SectionHeadingProps, "isPadded"> {
  /**
   * List items for `Highlights`.
   * List length should be a minimum of 2 and a maximum of 6.
   */
  listItems: HighlightListItem[];

  /**
   * Number of columns for option desktop & tablet breakpoints only.
   */
  columns?: "2" | "3";

  /**
   * Optional CTA rendered at the end of Highlights.
   * Only ONE CTA is allowed.
   */
  cta?: HighlightsCTAProps;
}

/**
 * CTA configuration for Highlights
 */
export type HighlightsCTAProps = Pick<
  ButtonV2Props,
  "label" | "href" | "onClick" | "iconPosition" | "ariaLabel" | "target"
> & {
  /**
   * Allowed button styles only.
   * Primary is intentionally NOT supported.
   */
  buttonStyle: "secondary" | "compact";

  /**
   * Icon override & Active icon override
   * - undefined → uses default BtIconArrowRightFill for compact style
   * - null → icon disabled
   * - string → custom icon
   */
  icon?: string | null;
  iconActive?: string | null;
};