import React from "react"

import { LinkIcon } from "@/icons"
import { FlexContainer, Typography } from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"
import { getChainIcon } from "@/components/shared/components/LogoViewer"
import { SupportedChainIds } from "@/types"
import { useIsMobile } from "@/hooks/use-is-mobile"

import * as S from "./styles"

export type EarnCardProps = {
  cardTitle: string
  cardImage: string
  redirectLink: string
  cardDescription: string
  chainId: SupportedChainIds
}

function EarnCard({
  chainId,
  cardImage,
  cardTitle,
  redirectLink,
  cardDescription,
}: EarnCardProps) {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()

  const linkIconSize = isMobile ? 14 : 20
  const chainIconSize = isMobile ? 24 : 32

  return (
    <S.CardLink href={redirectLink} target="_blank">
      <S.CardContainer>
        <S.ImageContainer className="image-zoom-container">
          <S.StyledImage
            src={cardImage}
            width={600}
            height={315}
            alt="card-img"
            className="image-zoom"
          />
        </S.ImageContainer>

        <FlexContainer width={100} gap={1.2} flexDirection="column">
          <FlexContainer
            width={100}
            alignItems="center"
            justifyContent="space-between"
          >
            <FlexContainer
              width={100}
              alignItems="center"
              flex={false}
              gap={1.2}
            >
              <Typography
                type={isMobile ? "TITLE_M" : "TITLE_XL"}
                color={theme.colors.white}
              >
                {cardTitle}
              </Typography>
              <LinkIcon
                width={linkIconSize}
                height={linkIconSize}
                color={theme.colors.gray400}
              />
            </FlexContainer>

            {getChainIcon(chainId, chainIconSize)}
          </FlexContainer>

          <Typography
            type={isMobile ? "BODY_MEDIUM_S" : "BODY_MEDIUM_M"}
            color={theme.colors.gray500}
          >
            {cardDescription}
          </Typography>
        </FlexContainer>
      </S.CardContainer>
    </S.CardLink>
  )
}

export default EarnCard