import Link from "next/link"
import { ReactNode } from "react"
import styled from "styled-components"

import {
  Button,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  Typography,
} from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"
import {
  BRAHMA_CONSOLE_KIT_GITHUB_LINK,
  BRAHMA_DISCORD_LINK,
  BRAHMA_TELEGRAM_LINK,
  BRAHMA_XTWITTER_LINK,
} from "@/components/shared/constants"

const SocialLink = styled(Link)`
  padding: 1rem;
  min-width: 3.6rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  color: #6d7178;
  cursor: pointer;
  border-radius: 0.5rem;
  transition:
    background-color 0.2s,
    color 0.2s;

  &:hover {
    background-color: rgba(178, 248, 255, 0.1);
    color: #b2f8ff;
  }
`

function MobileView() {
  const { theme } = useThemeContext()
  const socialLinks = [
    { href: BRAHMA_DISCORD_LINK, label: "Discord" },
    { href: BRAHMA_CONSOLE_KIT_GITHUB_LINK, label: "Github" },
    { href: BRAHMA_XTWITTER_LINK, label: "X" },
    { href: BRAHMA_TELEGRAM_LINK, label: "Telegram" },
  ]

  return (
    <FlexContainer
      justifyContent="space-between"
      flexDirection="column"
      width={100}
      padding="1rem"
      style={{
        height: "100vh",
      }}
    >
      <GrayBoundaryBlackWrapper
        style={{
          flex: "none",
        }}
        padding="0.4rem"
      >
        <FlexContainer
          bgColor={theme.colors.console2}
          padding="4rem 1rem 1rem 1rem"
          gap={0.4}
          flexDirection="column"
          width={100}
        >
          <FlexContainer
            justifyContent="center"
            alignItems="center"
            padding="2rem 0rem"
            flexDirection="column"
            gap={0.4}
          >
            <Typography type="TITLE_XXL" color={theme.colors.black}>
              Brahma Earn. Introducing Morpho Agent
            </Typography>
            <Typography type="BODY_MEDIUM_M" color={theme.colors.black}>
              Maximize your yields. To access Morpho Agent, you need the NFT.
              Reach out on our Discord to get yours.
            </Typography>
          </FlexContainer>

          <Link
            target="_blank"
            style={{
              width: "100%",
              marginBottom: "1rem",
            }}
            href={BRAHMA_DISCORD_LINK}
          >
            <Button buttonType="black" buttonSize="L">
              Get NFT
            </Button>
          </Link>

          <Typography type="BODY_MEDIUM_M" color={theme.colors.black}>
            Brahma Earn is optimized for desktop use. Please switch to a desktop
            device to access the interface.
          </Typography>
        </FlexContainer>
      </GrayBoundaryBlackWrapper>

      <FlexContainer
        flex={false}
        width={100}
        bgColor="#0d0d10"
        gap={0.25}
        padding="0.4rem"
        style={{
          margin: "1rem 0rem",
        }}
        borderRadius={0.5}
      >
        {socialLinks.map((link) => (
          <SocialButton key={link.href} href={link.href}>
            {link.label}
          </SocialButton>
        ))}
      </FlexContainer>
    </FlexContainer>
  )
}

function SocialButton({
  href,
  children,
}: {
  href: string
  children: ReactNode
}) {
  return (
    <SocialLink target="_blank" href={href}>
      {children}
    </SocialLink>
  )
}

export default MobileView