import React from "react"
import {
  Block,
  InfoCircle,
  LabelSmall,
  useStyletron,
} from "@mezo-org/mezo-clay"
import { usePassportContext } from "../../hooks/usePassportContext"

export default function TestnetTopBanner() {
  const [, theme] = useStyletron()

  const { environment } = usePassportContext()

  if (environment !== "testnet") {
    return null
  }

  return (
    <Block
      display="flex"
      alignItems="center"
      padding={`${theme.sizing.scale700} ${theme.sizing.scale600}`}
      backgroundColor={theme.colors.warning}
    >
      <InfoCircle size={theme.sizing.scale550} />
      <LabelSmall marginLeft={theme.sizing.scale500}>
        You are using testnet funds.
      </LabelSmall>
    </Block>
  )
}