import React, { FunctionComponent } from 'react';
import { StyledWrapper } from './styled-component';
import { WrapperProps } from './types.d';
import { useTheme } from '../Theme';

export const Wrapper: FunctionComponent<WrapperProps> = (props) => {
  const theme = useTheme();
  const {
    children,
    width = 'auto',
    height = 'auto',
    margin = '0px',
    padding = '0px',
    backgroundColor = 'light',
    withOpacity = false,
    customColor,
    borderRadius = '10px',
    className = '',
    id = '',
    shadow = theme.type === 'light' ? '0 5px 15px 0' : '0px -1px 1px 2px',
    style = {},
  } = props;

  return (
    <StyledWrapper
      $backgroundColor={backgroundColor}
      $customColor={customColor}
      $shadow={shadow}
      $theme={theme}
      $withOpacity={withOpacity}
      className={className}
      id={id}
      style={{ width, height, margin, padding, borderRadius, ...style }}
    >
      {children}
    </StyledWrapper>
  );
};
