import React, { FC } from "react";
import classNames from "classnames";
import { TabbedBanner } from "@arc-ui/components/TabbedBanner";
import { TemplateBannerProps } from "@arc-ui/components/TemplateBanner";
import { type HeadingLevel } from "@arc-ui/components/Heading";
import { SectionHeading, SectionHeadingProps } from "../SectionHeading";
import styles from "./BannerWithTabs.module.css";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

export const BannerWithTabs: FC<BannerWithTabsProps> = ({
  tabs,
  defaultValue,
  heading,
  headingLevel,
  content,
  id,
  isHeadingWordWrap,
  alignTypography = "left",
  minHeight,
  minHeightM,
  ...props
}) => {
  return (
    <div {...filterAttrs(props)}>
      <div
        className={classNames({
          [styles.bannerWithTabsHeadingCentered]: alignTypography === "center",
        })}
      >
        <SectionHeading
          id={id}
          isHeadingWordWrap={isHeadingWordWrap}
          heading={heading}
          headingLevel={headingLevel}
          content={content}
          isPadded={alignTypography === "left" ? true : false}
        />
      </div>
      <TabbedBanner
        minHeight={minHeight}
        minHeightM={minHeightM}
        tabs={tabs}
        defaultValue={defaultValue}
      />
    </div>
  );
};

export interface BannerWithTabsProps
  extends Omit<SectionHeadingProps, "image" | "isPadded"> {
  /**
   * Align `SectionHeading` component.
   */
  alignTypography?: "left" | "center";

  /**
   * Default to an inital value of a tab. If this is left blank it will default to first tab.
   */
  defaultValue?: string;

  /**
   * Determine what tabs to render. They need both a `value` and `label` prop
   */
  tabs: {
    value: string;
    label: string;
    content: TemplateBannerProps;
  }[];

  /**
   * Set the minimum height of the all banners M and above.
   */
  minHeight?: number;

  /**
   * Set the minimum height all of the banner for the M breakpoint. This will be active when the TabbedBanner switches to the mobile layout at the medium breakpoint.
   */
  minHeightM?: number;

  /**
   * heading for `SectionHeading`.
   */
  heading: string;
  /**
   * Heading level for `SectionHeading`.
   */
  headingLevel?: HeadingLevel;
  /**
   * Text content for `SectionHeading`.
   */
  content?: string;
}