import React from "react";
import { Status, StatusProps } from "../../data/Props";
import StatusStyle from "./status.module.css";
import { ReactComponent as LoadingView } from "../../assets/image/loading.svg";
import { ReactComponent as FailedView } from "../../assets/image/failed.svg";

export const CommonStatus: React.FC<StatusProps> = (props) => {
  return (
    <div
      className={StatusStyle.container}
      style={{
        width: props.width ?? "auto",
        height: props.height ?? "auto",
        backgroundColor: props.backgroundColor ?? "#00000000",
        borderRadius: props.borderRadius ?? 0,
      }}
    >
      {props.status == Status.LOADING ? (
        <LoadingView
          className={StatusStyle.loading}
          style={{
            width: props.iconSize ?? "auto",
            height: props.iconSize ?? "auto",
            fill: props.iconColor ?? "#fff"
          }}
        ></LoadingView>
      ) : (
        <FailedView
          style={{
            width: props.iconSize ?? "auto",
            height: props.iconSize ?? "auto",
            fill: props.iconColor ?? "#fff"
          }}
        ></FailedView>
      )}

      {props.text ? (
        <div
          style={{
            marginTop: props.textMargin ?? "4px",
            fontSize: props.fontSize ?? "14px",
            color: props.fontColor ?? "#333",
            fontWeight: props.fontWeight ?? "normal",
          }}
        >
          {props.text}
        </div>
      ) : null}
    </div>
  );
};
