text: import React, { useContext } from "react";
  import { Container, Row, Col } from "react-bootstrap";
  import { Context } from "../../AppContext";
  import SingleCard from "../SingleCard/SingleCard";
  
  const SlowTechnologyAction = () => {
    const { showSTA, STcardDeck, showSTModal } = useContext(
      Context
    );
  
    if (!showSTA) {
      return null;
    }
  
    return (
      <Container>
        <Row className="justify-content-center extra-top-margin">
          <Col xs={6} sm={4} md={3}>
            <SingleCard
              src={STcardDeck[0].image}
              alt={STcardDeck[0].name}
              delay={0}
              value={STcardDeck[0].id}
              onClick={() => showSTModal()}
            />
          </Col>
          <Col xs={12} sm={8} md={9} className="tarot-read animated fadeIn delay-1s slower">
            <p>{STcardDeck[0].action}</p>
          </Col>
        </Row>
      </Container>
    );
  };
  
  export default SlowTechnologyAction;
  