import styled from "styled-components/native";

interface IContainerStyledProps {
  width: string;
  height: string;
}

interface ITextContainerProps {
  bottomMargin: string;
  isTextOver: boolean;
}

export const Container = styled.View`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: ${({ width }: IContainerStyledProps) => (width ? `${width}` : "auto")};
  height: ${({ height }: IContainerStyledProps) =>
    height ? `${height}` : "auto"};
`;
export const TextContainer = styled.View`
  bottom: ${({ bottomMargin, isTextOver }: ITextContainerProps) =>
    isTextOver ? `${bottomMargin}` : "0px"};
  position: ${({ isTextOver }: ITextContainerProps) =>
    isTextOver ? "absolute" : "relative"};
`;
