import React from "react";

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

import { Heading, type HeadingLevel } from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";
import { Box } from "@arc-ui/components/Box";
import { Rule } from "@arc-ui/components/Rule";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { useMediaQuery } from "@arc-ui/components/use-media-query";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import styles from "./Summary.module.css";

export const Summary: React.FC<SummaryProps> = ({
  content,
  noBorder = false,
  headingLevel = "3",
  ...props
}) => {
  const isMinWidthArcBreakpointM = useMediaQuery(
    `(min-width: ${ArcSizeBreakpointsM})`,
  );

  return (
    <Box
      isBorderRadius
      {...(!noBorder ? { borderWidth: "thin" } : { elevationLevel: "1" })}
      padding="24"
      {...filterAttrs(props)}
    >
      <div className={styles.row}>
        {content.map(({ heading, text }, i) => (
          <>
            <div className={styles.col}>
              <Heading size="s" level={headingLevel}>
                {heading}
              </Heading>
              <VerticalSpace size="8" />
              <Text size="s">{text}</Text>
            </div>
            {i !== content.length - 1 && (
              <div className={styles.ruleContainer}>
                <Rule
                  orientation={
                    isMinWidthArcBreakpointM ? "vertical" : "horizontal"
                  }
                />
              </div>
            )}
          </>
        ))}
      </div>
    </Box>
  );
};

interface SummaryContent {
  heading: string;
  text: string;
}

export interface SummaryProps {
  /**
   * Content for <Summary />
   */
  content: [SummaryContent, SummaryContent, SummaryContent];

  /**
   * Determine a heading level for each column.
   */
  headingLevel?: HeadingLevel;

  noBorder?: boolean;
}