import React from "react";

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  h?: string | number;
  w?: string | number;
  children: JSX.Element;
}

// Wrap an element in this component to center it

export const Center = ({ h, w, children, ...rest }: Props) => {
  const styles = {
    height: h,
    width: w,
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  };
  return (
    <div style={styles} {...rest}>
      {children}
    </div>
  );
};
