import React from 'react';
import styled from 'styled-components';

import { Image as ImageComponent, type ImageProps } from '@redocly/theme/components/Image/Image';

type MarkdocImageProps = React.PropsWithChildren<ImageProps> & {
  align?: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
};
export function Image(props: MarkdocImageProps) {
  const { align, ...rest } = props;
  return align ? (
    <ImageWrapper align={align}>
      <ImageComponent {...rest} />
    </ImageWrapper>
  ) : (
    <ImageComponent {...rest} />
  );
}

const ImageWrapper = styled.div<{ align?: MarkdocImageProps['align'] }>`
  text-align: ${(props) => props.align || 'initial'};

  img {
    display: block;
    ${(props) => {
      switch (props.align) {
        case 'left':
          return 'margin-right: auto; margin-left: 0;';
        case 'right':
          return 'margin-left: auto; margin-right: 0;';
        case 'center':
          return 'margin-left: auto; margin-right: auto;';
        default:
          return '';
      }
    }}
  }
`;