import Link from "next/link"
import React from "react"

import {
  FlexContainer,
  HoverableIconWrapper,
  Typography,
} from "@/components/shared/components"
import {
  BRAHMA_CONSOLE_KIT_LINK,
  BRAHMA_DOCS_LINK,
  BRAHMA_GITHUB_LINK,
  BRAHMA_PRIVACY_POLICY_LINK,
  BRAHMA_TELEGRAM_LINK,
  BRAHMA_WEBSITE_LINK,
  BRAHMA_XTWITTER_LINK,
  BRAHMA_DISCORD_LINK,
  BRAHMA_TERMS_AND_CONDITIONS_LINK,
  PAGES,
} from "@/components/shared/constants"
import { useIsMobile } from "@/hooks/use-is-mobile"
import {
  BrahmaTextLogo,
  DiscordIcon,
  TelegramIcon,
  XTwitterIcon,
} from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"

function EarnFooter() {
  const isMobile = useIsMobile()
  const { theme } = useThemeContext()

  const footerPadding = isMobile ? "4rem 2rem 4rem 2rem" : "12rem"
  const footerGap = isMobile ? 4 : 12
  const iconGap = 3.2

  return (
    <FlexContainer
      width={100}
      gap={footerGap}
      justifyContent="space-between"
      padding={footerPadding}
      flexDirection={isMobile ? "column" : "row"}
      alignItems={isMobile ? "center" : "flex-start"}
    >
      <Link target="_blank" href={BRAHMA_WEBSITE_LINK}>
        <BrahmaTextLogo />
      </Link>

      <FlexContainer
        flex={isMobile ? true : false}
        gap={isMobile ? 1.6 : 5.6}
        alignItems="center"
        justifyContent="center"
        flexDirection={isMobile ? "column" : "row"}
        width={isMobile ? 100 : undefined}
      >
        <FlexContainer
          gap={1.6}
          flex={isMobile ? true : false}
          flexDirection="column"
          alignItems={isMobile ? "center" : "flex-start"}
        >
          <FooterLink href={BRAHMA_WEBSITE_LINK}>Brahma Account</FooterLink>
          <FooterLink href={BRAHMA_DOCS_LINK}>Docs</FooterLink>
          <FooterLink href={BRAHMA_GITHUB_LINK}>GitHub</FooterLink>
        </FlexContainer>

        <FlexContainer
          gap={1.6}
          flex={isMobile ? true : false}
          flexDirection="column"
          alignItems={isMobile ? "center" : "flex-start"}
        >
          <FooterLink href={PAGES.SURGE_PURGE}>
            Surge and Purge Agent
          </FooterLink>
          <FooterLink href={PAGES.MORPHO_OPTIMIZER}>Morpho Agent</FooterLink>
          <FooterLink href={PAGES.SWELL_REWARD}>Swell Agent</FooterLink>
        </FlexContainer>

        <FlexContainer
          gap={1.6}
          flex={isMobile ? true : false}
          flexDirection="column"
          alignItems={isMobile ? "center" : "flex-start"}
        >
          <FooterLink href={BRAHMA_CONSOLE_KIT_LINK}>ConsoleKit</FooterLink>
          <FooterLink href={BRAHMA_PRIVACY_POLICY_LINK}>
            Privacy Policy
          </FooterLink>
          <FooterLink href={BRAHMA_TERMS_AND_CONDITIONS_LINK}>
            Terms & Conditions
          </FooterLink>
        </FlexContainer>
      </FlexContainer>

      <FlexContainer flex={false} alignItems="center" gap={iconGap}>
        <Link target="_blank" href={BRAHMA_TELEGRAM_LINK}>
          <HoverableIconWrapper
            icon={<TelegramIcon />}
            hoverColor={theme.colors.white}
          />
        </Link>
        <Link target="_blank" href={BRAHMA_XTWITTER_LINK}>
          <HoverableIconWrapper
            icon={<XTwitterIcon />}
            hoverColor={theme.colors.white}
          />
        </Link>
        <Link target="_blank" href={BRAHMA_DISCORD_LINK}>
          <HoverableIconWrapper
            icon={<DiscordIcon />}
            hoverColor={theme.colors.white}
          />
        </Link>
      </FlexContainer>
    </FlexContainer>
  )
}

export default EarnFooter

const FooterLink = ({ href, children }: { href: string; children: string }) => {
  const { theme } = useThemeContext()
  return (
    <Link target="_blank" href={href}>
      <Typography
        hoverColor={theme.colors.console2}
        type="TITLE_XS"
        color={theme.colors.gray400}
      >
        {children}
      </Typography>
    </Link>
  )
}