import { View } from "@tarojs/components";
import React, { CSSProperties } from "react";
import styles from "./oui-loading.module.scss";
import OuiSpacer from "@/components/oui-spacer/oui-spacer";
import { Direction } from "@/components/global/direction";

interface OuiLoadingProps {
  color?: string;
  style?: CSSProperties;
}

class DecorationStyle {
  backgroundColor: string;
}

function OuiLoading({ color = "#141414", style }: OuiLoadingProps) {
  const generateDecorationStyle = (): DecorationStyle => {
    return {
      backgroundColor: color,
    };
  };
  return (
    <View className={styles.component} style={style}>
      <OuiSpacer direction={Direction.horizontal} gap={4}>
        <View
          className={styles.decoration}
          style={generateDecorationStyle()}
        ></View>
        <View
          className={styles.decoration}
          style={generateDecorationStyle()}
        ></View>
        <View
          className={styles.decoration}
          style={generateDecorationStyle()}
        ></View>
      </OuiSpacer>
    </View>
  );
}

export default OuiLoading;