import { createMemo, type JSXElement } from "solid-js";
import "../styles/Box.sass";

interface Props {
  thickness: number;
  color?: string;
  children: JSXElement;
  curved?: boolean;
}

export default (props: Props) => {
  const boxClass = createMemo(() => (props.curved ? "curvedbox" : "box"));

  return (
    <section
      class={boxClass()}
      style={{ border: `${props.thickness}px solid ${props.color || "white"}` }}
    >
      {props.children}
    </section>
  );
};