import React from "react";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
import { Download, type DownloadProps } from "@arc-ui/components/Download";
import { Columns, ColumnsCol } from "@arc-ui/components/Columns";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

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

export const DownloadList: React.FC<DownloadListProps> = ({
  heading,
  id,
  headingLevel = "2",
  isHeadingWordWrap,
  content,
  downloads,
  alignment = "below",
  ...props
}) => {
  return (
    <div {...filterAttrs(props)}>
      <Columns>
        <ColumnsCol spanL={alignment === "right" ? 6 : 9} spanM={9} span={12}>
          {" "}
          <SectionHeading
            id={id}
            heading={heading}
            isHeadingWordWrap={isHeadingWordWrap}
            headingLevel={headingLevel}
            content={content}
          />
        </ColumnsCol>
        <ColumnsCol spanL={alignment === "right" ? 6 : 8} spanM={9} spanS={12}>
          <div className={styles[`downloadList-${alignment}`]}>
            {downloads.map((downloadProps, i) => (
              <React.Fragment key={`download-${i}-${downloadProps.name}`}>
                <Download {...downloadProps} />
                {i !== downloads.length - 1 && <VerticalSpace size="16" />}
              </React.Fragment>
            ))}
          </div>
        </ColumnsCol>
      </Columns>
    </div>
  );
};

export interface DownloadListProps
  extends Omit<SectionHeadingProps, "isPadded"> {
  /**
   * Set the list of `Download` components.
   */
  downloads: DownloadProps[];
  /**
   * Align the `Download` list below or to the right of the `SectionHeading`.
   */
  alignment?: "below" | "right";
}