import * as React from "react"
import Header, { HeaderSize } from "./Header"
import { getConfig } from "jamplay-common/remote-config"
import { OnlyLogoNavigationBar } from "./NavigationBar"

export const InvalidFeature: React.SFC = (props) => {
  return (
    <div style={{ margin: "64px 0", textAlign: "center" }}>
      <img
        style={{
          width: "100%",
          maxWidth: 450,
        }}
        src={`${getConfig().publicRuntimeConfig.staticFolder ||
          ""}/ui-assets/images/icon-error-404.png`}
      />
      <div style={{ textAlign: "center", color: "#F05A22" }}>
        <Header size={HeaderSize.one}>
          ท่านไม่สามารถใช้งานในฟังก์ชั่นนี้ได้
        </Header>
        <Header size={HeaderSize.three}>
          เราขออภัยในความไม่สะดวกมา ณ ที่นี้
        </Header>
      </div>
    </div>
  )
}

export const InvalidFeatureWithNavbar: React.SFC = (props) => {
  return (
    <div>
      <OnlyLogoNavigationBar />
      <InvalidFeature />
    </div>
  )
}