import Image from "next/image"
import Link from "next/link"

import PoweredByImage from "@/icons/agent.png"
import {
  Button,
  FlexContainer,
  GrayBoundaryBlackWrapper,
} from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"

export default function PoweredByContainer() {
  const { theme } = useThemeContext()
  return (
    <GrayBoundaryBlackWrapper padding="0.4rem">
      <FlexContainer padding="0.4rem" bgColor={theme.colors.gray700}>
        <Image
          alt="powered by"
          width={340}
          height={180}
          src={PoweredByImage.src}
        />
      </FlexContainer>
      <FlexContainer
        width={100}
        padding="1.6rem"
        bgColor={theme.colors.gray700}
      >
        <Link
          target="_blank"
          style={{
            width: "100%",
          }}
          href="https://consolekit.brahma.fi"
        >
          <Button buttonSize="L" buttonType="white">
            Learn more about ConsoleKit
          </Button>
        </Link>
      </FlexContainer>
    </GrayBoundaryBlackWrapper>
  )
}