cs-2022-class-profile/components/ComponentWrapper.tsx

import React from "react";

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

type AlignOption = "left" | "center" | "right";

type ComponentWrapperProps = {
  children: React.ReactNode;
  heading: string;
  bodyText: string;
  align?: AlignOption;
  noBackground?: boolean;
};

export function ComponentWrapper({
  heading,
  bodyText,
  children,
  align = "left",
  noBackground = false,
}: ComponentWrapperProps) {
  const alignClasses: { [key in AlignOption]: string } = {
    left: styles.wrapperLeft,
    center: styles.wrapperCenter,
    right: styles.wrapperRight,
  };

  return (
    <div
      className={`
      ${alignClasses[align]} 
      ${noBackground ? styles.noBackground : ""}
      `}
    >
      <div className={styles.internalWrapper}>
        <h3>{heading}</h3>
        <p>{bodyText}</p>
      </div>
      <div className={styles.internalWrapper}>{children}</div>
    </div>
  );
}