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

interface IStylesProps {
  background: string;
  flexAlign?: string;
  height?: string;
  style?: CSSObject;
}

export const Banner = styled.View`
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: ${({ background }: IStylesProps) => background};
  height: ${({ height }: IStylesProps) => height};
  padding: 16px;
  display:flex;
  justify-content: center;
  ${({ style }: IStylesProps) => style};
`;

export const BannerImage = styled.View`
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  margin: 0;
`;

export const BannerTitle = styled.View`
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: ${({ flexAlign }: IStylesProps) => flexAlign};
`;

export const BannerButton = styled.View`
  display: flex;
  justify-content: center;
  align-items: ${({ flexAlign }: IStylesProps) => flexAlign};
  margin: 16px 0 0;
`;
