import styled from "styled-components";

interface IStylesProps {
  backgroundImage?: boolean;
  image?: string;
  textPosition?: string;
  backgroundColor?: string;
}

export const Banner = styled.section`
  @media screen and (min-width: 768px) {
    display: flex;
    align-items: center;
    flex-direction: ${({ textPosition }: IStylesProps) =>
      textPosition === "right" ? "row-reverse" : "row"};
  }
`;

export const BannerImage = styled.figure`
  margin: 0;
  img {
    width: 100%;
  }
  @media screen and (min-width: 768px) {
    width: 50%;
  }
`;

export const BannerContent = styled.div`
  label {
    padding-top: 40px;
  }
  @media screen and (min-width: 768px) {
    width: 50%;
    text-align: ${({ textPosition }: IStylesProps) =>
      textPosition === "right" ? "left" : "right"};
  }
  @media screen and (max-width: 767px) {
    text-align: left;
    label {
      text-align: left;
    }
  }
`;

export const BannerContentTitle = styled.div`
  float: left;
  h6 {
    margin: 0;
  }
  @media screen and (min-width: 768px) {
    float: ${({ textPosition }: IStylesProps) =>
      textPosition === "right" ? "left" : "right"};
  }
`;
