import { css, styled } from 'styled-components';

import { IImageWrapper } from './ImageWrapper.interface';

export const StyledImageWrapper = styled.picture<IImageWrapper>`
  position: relative;

  & img{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:cover;
  }

  ${(props) => {
    switch (props.$align) {
      case "left": default:
        return css` `;
      case "center":
        return css`
          margin-left:auto;
          margin-right:auto;
        `;
      case "right":
        return css`
          margin-right:auto;
        `;
    }
  }}
`