import { IImageWrapper } from './ImageWrapper.interface';
import React from 'react';
import { StyledImageWrapper } from './ImageWrapper.theme';

const ImageWrapper = ({
  aspectRatioHeight,
  align,
  caption,
  href,
  linkTarget,
  rel,
  className,
  style,
  children
}: IImageWrapper) => {
  return (
    <StyledImageWrapper $align={align} className={className} style={style}>
      <span
        className='d-block'
        aria-hidden="true"
        style={
          aspectRatioHeight
            ? { paddingBottom: `${aspectRatioHeight.toFixed(2)}%` }
            : {}
        }
      ></span>
      {children}
      {!!caption && (
        <figcaption>
          <span>{caption}</span>
        </figcaption>
      )}
      {!!href && (
        <a className={'linker'} href={href} target={linkTarget} rel={rel}></a>
      )}
    </StyledImageWrapper>
  )
}

export default ImageWrapper