import { PureComponent, PropsWithChildren } from "react";

import { FormatUtils } from "@dndbeyond/character-rules-engine/es";

interface Props extends PropsWithChildren {
  name: string;
  className: string;
}
export default class Subsection extends PureComponent<Props> {
  static defaultProps = {
    className: "",
  };

  render() {
    const { name, children, className } = this.props;

    let classNames: Array<string> = [className, "ct-subsection"];
    if (name) {
      classNames.push(`ct-subsection--${FormatUtils.slugify(name)}`);
    }

    return <div className={classNames.join(" ")}>{children}</div>;
  }
}