import { forwardRef } from "react";
import { styled } from "../../theme";
import type { WithTestId } from "../../types";

const StyledBox = styled("div");

type BoxProps = WithTestId<React.ComponentProps<typeof StyledBox>>;

/**
 * A styleable abstraction of the `<div>` element.
 */
export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
  return <StyledBox ref={ref} {...props} />;
});

Box.displayName = "Box";