import {
  BuyStepThunderImage,
  SellStepThunderImage,
} from "@/components/shared/assets"
import { FlexContainer, Typography } from "@/components/shared/components"
import { AutomationAgent } from "@/components/swap-agent/types"
import AiStarIcon from "@/icons/AiStarIcon"
import { useThemeContext } from "@/providers/themeProvider"
import Image from "next/image"
import styled from "styled-components"

type AgentIsRunningStepProps = {
  selectedAgent: AutomationAgent
}

export default function AgentIsRunningStep({
  selectedAgent,
}: AgentIsRunningStepProps) {
  const { theme } = useThemeContext()
  const isSurge = selectedAgent === "SURGE"

  return (
    <FlexContainer
      gap={0.8}
      flexDirection="column"
      alignItems="center"
      opacityInEffect
    >
      <FlexContainer
        cursor="pointer"
        padding="0.4rem"
        flexDirection="column"
        borderColor={isSurge ? theme.colors.success : theme.colors.error}
        bgColor={theme.colors.black}
        borderRadius={0.8}
        style={{
          maxWidth: "36.4rem",
        }}
      >
        <Image
          style={{
            borderRadius: "0.4rem 0.4rem 0 0",
          }}
          src={isSurge ? BuyStepThunderImage.src : SellStepThunderImage.src}
          width={354}
          height={130}
          alt="BuyStepThunderImage"
        />
      </FlexContainer>

      <AiStarIcon color={isSurge ? theme.colors.success : theme.colors.error} />
      <FlexContainer gap={0.8} alignItems="center" flexDirection="column">
        <Title color={theme.colors.gray100}>Your Agent is running</Title>
        <Typography color={theme.colors.gray500}>
          Analyzing and executing strategic trades.
          <br /> Position will appear in the Active tab soon
        </Typography>
      </FlexContainer>
    </FlexContainer>
  )
}

const Title = styled(Typography)`
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
`