import cx from "classnames";
import React from "react";
import { Grid } from "@/components/Grid/Grid";
import { Button } from "../Button/Button";
import { GridCol } from "../Grid/GridCol";

const CLASS_ROOT = "body-banner";

export const bodyBannerColors = [
  "background-primary",
  "background-accent",
  "surface-subtle",
] as const;
export type BodyBannerColor = (typeof bodyBannerColors)[number];

interface BodyBannerProps {
  size?: "large";
  /** Background color using design tokens */
  color?: BodyBannerColor;
  /** Additional CSS classes */
  className?: string;
  /** Image element */
  image?: React.ReactNode;
  /** Content area - typically heading and description */
  children?: React.ReactNode;
  /** Button text */
  buttonText?: string;
  /** Additional CSS classes for button */
  buttonClassName?: string;
}
export const BodyBanner = ({
  className,
  size,
  color = "background-primary",
  image,
  children,
  buttonText,
  buttonClassName,
  ...other
}: BodyBannerProps) => {
  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${size}`]: size,
      [color]: color !== "background-primary",
    },
    className,
  );
  return (
    <Grid className={classes} {...other}>
      <GridCol
        size={{ xs: 12, md: size === "large" ? 6 : 12 }}
        className={`${CLASS_ROOT}__content`}
      >
        {size !== "large" && image && (
          <div className={`${CLASS_ROOT}__image`}>{image}</div>
        )}
        <div className={`${CLASS_ROOT}__content-inner`}>
          <div>{children}</div>
          <div className={`${CLASS_ROOT}__button`}>
            <Button
              size="large"
              type="fill"
              className={cx("mb-none", buttonClassName)}
            >
              {buttonText}
            </Button>
          </div>
        </div>
      </GridCol>
      {size === "large" && image && (
        <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
          {image}
        </GridCol>
      )}
    </Grid>
  );
};