import Taro from '@tarojs/taro';
import classNames from 'classnames';
import { View, Text } from '@tarojs/components';
import { times } from '@/utils/tools';

import './style.scss';

export default function WaterMask(props) {
  const {
    className,
    style,
    text,
    textClassName,
    image,
    imageClassName,
    repeat = 2,
  } = props;

  const mainClass = classNames('water-mask', className);
  const textClass = classNames('water-mask-text', textClassName);

  return (
    <View
      className={mainClass}
      style={style}
    >
      {text ? (
        <View className={textClass}>
          {times(repeat).map((_, inx) => {
            const key = `wt-${inx}`
            return (
              <View className="water-mask-text-item" key={key}>
                <View className="aspect-ratio" />
                <View className="inner-container">{text}</View>
              </View>
            )
          })}
        </View>) : null}
    </View>
  )
}

WaterMask.options = {
  addGlobalClass: true
}
