import cx from "classnames";
import React from "react";
import { Container } from "../Container";

export const sectionColors = [
  "background-secondary",
  "background-contrast",
  "background-accent",
  "background-accent1-blog",
  "background-accent2-blog",
  "background-none",
  "surface-subtle",
] as const;
export type SectionColor = (typeof sectionColors)[number];

export type SectionSpacing = "default" | "small" | "xsmall";

export interface SectionProps {
  /** Background color of section */
  color?: SectionColor;
  /**
   * Spacing between sections
   *
   * if two sections with different color meet
   * use default (larger) spacing, if two section have same color
   * use small spacing on second one. Use xsmall for specific
   * cases e.g. as part of Megamenu
   */
  spacing?: SectionSpacing;
  /** Rendered HTML element */
  tag?: React.ElementType;
  /** Additional CSS classes */
  className?: string;
  /** Section content */
  children?: React.ReactNode;
  /** Additional classes passed to the container */
  containerClassName?: string;
}

const CLASS_ROOT = "section";

export const Section: React.FC<SectionProps> = ({
  className,
  color,
  spacing,
  tag: Tag = "div",
  children,
  containerClassName,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    {
      [`${CLASS_ROOT}--${spacing}`]: spacing,
      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
      ...(color === "background-contrast"
        ? { [`${color} text-inverse`]: true }
        : {}),
    },
    className,
  );

  return (
    <Tag className={classes} {...other}>
      <Container className={containerClassName}>{children}</Container>
    </Tag>
  );
};

Section.displayName = "Section";