Box

import styled from "styled-components";
export default function Box({
  as,
  width,
  height,
  children,
  padding,
  paddingLeft,
  paddingRight,
  paddingTop,
  paddingBottom,
  margin,
  marginLeft,
  marginRight,
  marginTop,
  marginBottom,
  boxShadow,
  backgroundColor,
  borderWidth,
  borderColor,
  borderRadius,
  border,
  borderTop,
  borderBottom,
  borderLeft,
  borderRight,
  display = "flex",
  justify,
  align,
  style,
  shrink,
  glow,
  wrap,
  borderStyle,
  className,
}) {
  return (
    <BoxStyled
      as={as}
      style={style}
      className={className}
      $display={display}
      $justify={justify}
      $align={align}
      $borderStyle={borderStyle}
      $border={border}
      $borderRight={borderRight}
      $borderLeft={borderLeft}
      $borderBottom={borderBottom}
      $borderTop={borderTop}
      $borderRadius={borderRadius}
      $borderColor={borderColor}
      $borderWidth={borderWidth}
      $margin={margin}
      $marginRight={marginRight}
      $marginLeft={marginLeft}
      $marginBottom={marginBottom}
      $marginTop={marginTop}
      $backgroundColor={backgroundColor}
      $boxShadow={boxShadow}
      $padding={padding}
      $paddingRight={paddingRight}
      $paddingLeft={paddingLeft}
      $paddingBottom={paddingBottom}
      $paddingTop={paddingTop}
      $width={width}
      $height={height}
      $shrink={shrink}
      $glow={glow}
      $wrap={wrap}
    >
      {children}
    </BoxStyled>
  );
}
export const BoxStyled = styled.div`
  flex-shrink: ${({ $flexShrink }) => $flexShrink};
  flex-grow: ${({ $flexGlow }) => $flexGlow};
  flex-wrap: ${({ $wrap }) => $wrap};
  display: ${({ $display }) => $display};
  justify-content: ${({ $justify }) => $justify};
  align-items: ${({ $align }) => $align};
  border-style: ${({ $borderStyle }) => $borderStyle};
  border: ${({ border }) => border};
  border-right: ${({ $borderRight }) => $borderRight};
  border-left: ${({ $borderLeft }) => $borderLeft};
  border-bottom: ${({ $borderBottom }) => $borderBottom};
  border-top: ${({ $borderTop }) => $borderTop};
  border-radius: ${({ $borderRadius }) => $borderRadius};
  border-color: ${({ $borderColor }) => $borderColor};
  border-width: ${({ $borderWidth }) => $borderWidth};
  background-color: ${({ $backgroundColor }) => $backgroundColor};
  box-shadow: ${({ $boxShadow }) => $boxShadow};
  margin: ${({ $margin }) => $margin};
  margin-right: ${({ $marginRight }) => $marginRight};
  margin-left: ${({ $marginLeft }) => $marginLeft};
  margin-top: ${({ $marginTop }) => $marginTop};
  margin-bottom: ${({ $marginBottom }) => $marginBottom};
  padding: ${({ $padding }) => $padding};
  padding-right: ${({ $paddingRight }) => $paddingRight};
  padding-left: ${({ $paddingLeft }) => $paddingLeft};
  padding-top: ${({ $paddingTop }) => $paddingTop};
  padding-bottom: ${({ $paddingBottom }) => $paddingBottom};
  width: ${({ $width }) => $width};
  height: ${({ $height }) => $height};
`;

import Box from "../../example/Box";

export default function TestView() {
  return (
    <div className="test-view">
      <Box
        width={"300px"}
        padding={"30px"}
        backgroundColor={"var(--primary)"}
        borderRadius={"80px"}
      >
        This is Style Box
      </Box>
    </div>
  );
}