import React from "react";
import errorImage from "../video-player/icons/laptop-book.png";
import { MediaErrorContainer } from "./style";
import useTranslation from "../../hooks/useTranslation";
import wordStore from "../../mc/wordStore.json";

const MediaError = ({
  width,
  height,
  small,
  bgColor = "#F5F7F7",
  message,
}) => {
  const { findText } = useTranslation(wordStore);

  return (
    <MediaErrorContainer
      width={width}
      height={height}
      bgColor={bgColor}
      className={small ? "small" : undefined}
    >
      <div>
        <img src={errorImage} alt="" />
        <p>{message || findText("This media is unavailable at the moment")}</p>
      </div>
    </MediaErrorContainer>
  );
};

export default MediaError;
