import React from 'react';

import { TextWrapper, Img } from './styled';

type Props = WatermarkType & {
  viewScale: number;
};

const index: React.FC<Props> = ({
  type,
  text,
  imagepath,
  viewScale,
  scale = 1,
  opacity,
  textcolor,
  rotation,
}: Props) =>
  type === 'text' ? (
    <TextWrapper
      style={{
        fontSize: `${viewScale * scale * 22}px`,
        opacity,
        color: textcolor,
        transform: `rotate(-${rotation}deg)`,
      }}
    >
      {text}
    </TextWrapper>
  ) : (
    <Img
      style={{
        opacity,
        transform: `scale(${viewScale * scale}) rotate(-${rotation}deg)`,
      }}
      src={imagepath}
    />
  );

export default index;