import styled from "styled-components/native";
import { colors } from "data/dataMx";
import { CSSObject } from "styled-components";

export interface IStylesProps {
  width: string;
  height: string;
  managePadding: string;
  manageMargin: string;
  bgColor: colors;
  flexDirection: string;
  alignItems: string;
  alignContent: string;
  justifyContent: string;
  styles?: CSSObject;
}

export const StyledCardContainer = styled.View`
  width: ${({ width }: IStylesProps) => width};
  height: ${({ height }: IStylesProps) => height};
  border-radius: 8px;
  padding: ${({ managePadding }: IStylesProps) => managePadding};
  margin: ${({ manageMargin }: IStylesProps) => manageMargin};
  background-color: ${({ bgColor }: IStylesProps) => bgColor};
  display: flex;
  flex-direction: ${({ flexDirection }: IStylesProps) => flexDirection};
  align-items: ${({ alignItems }: IStylesProps) => alignItems};
  align-content: ${({ alignContent }: IStylesProps) => alignContent};
  justify-content: ${({ justifyContent }: IStylesProps) => justifyContent};
  flex-wrap: wrap;
  ${({ styles }) => styles};
`;
