import React from 'react';

import { WatermarkType } from '../../constants/type';

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 * 24}px`,
        opacity: `${opacity}%`,
        color: textcolor,
        transform: `rotate(-${rotation}deg)`,
      }}
    >
      {text}
    </TextWrapper>
  ) : (
    <Img
      style={{
        opacity: `${opacity}%`,
        transform: `scale(${viewScale * scale}) rotate(-${rotation}deg)`,
      }}
      src={imagepath}
    />
  )
);

export default index;