import styled from 'styled-components';
import { getBackgroundColor } from '../utils';
import { ThemeObject } from '../Theme';

export const StyledWrapper = styled.div.attrs(
  (props: {
    $theme: ThemeObject;
    $backgroundColor: keyof ThemeObject['background'];
    $withOpacity: boolean;
    $customColor?: string;
    $shadow: string;
  }) => ({
    $theme: props.$theme,
    $backgroundColor: props.$backgroundColor,
    $withOpacity: props.$withOpacity,
    $customColor: props.$customColor,
    $shadow: props.$shadow,
  })
)`
  background-color: ${(props) =>
    getBackgroundColor(props.$theme, props.$backgroundColor, props.$withOpacity, props.$customColor)};
  box-shadow: ${(props) => `${props.$shadow} ${props.$theme.background.shadow}`};
`;
