import { useState, useEffect, useCallback} from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import { ArrowRightCircle } from 'react-bootstrap-icons';
import HeadImg from '../assets/img/header-img.svg';

const Banner = () => {
  const job = "Web Developer";
  const [text, setText] = useState('');
  const [isDeleting, setIsDeleting] = useState(false); // Track whether we are deleting
  const [delta, setDelta] = useState(300); // Set an initial value
  const period = 2000;

  const tick = useCallback(() => {
    const fullText = job;
    let updatedText = '';

    if (isDeleting) {
        updatedText = fullText.substring(0, text.length - 1);
    } else {
        updatedText = fullText.substring(0, text.length + 1);
    }

    setText(updatedText);

    if (!isDeleting && updatedText === fullText) {
        setTimeout(() => setIsDeleting(true), period);
    } else if (isDeleting && updatedText === '') {
        setIsDeleting(false);
    }

    setDelta(isDeleting ? 150 : 300); // Adjust speed for deleting and typing
}, [isDeleting, text, job, period]);

useEffect(() => {
    let ticker = setInterval(() => {
        tick();
    }, delta);
    return () => { clearInterval(ticker); };
}, [tick, delta]); // Include tick and delta in the dependency array

    return (
        <section className='banner' id="home">
            <Container>
                <Row className="align-items-center">
                    <Col xs={12} md={6} xl={7}>
                        <span className="tagLine">welcome to my portfolio</span>
                        <h1>{`Hi my name is Khang, a `}
                            <span className="wrap">{text}</span>
                        </h1>
                        <p>Hello, My name is Khang. I am a freshman majoring in computer science at Cal Poly Pomona. As a backend developer, I am proficient in JavaScript, React, Node.js, Python, Django, and MySQL. My passion for coding extends beyond the classroom—I’m also an avid manga enthusiast. Thank you for visiting my portfolio!</p>
                        <button onClick={() => console.log('connect')}>Let's Connect! <ArrowRightCircle size={20} /></button>
                    </Col>
                    <Col xs={12} md={6} xl={5}>
                        <img src={HeadImg} alt="Header Img" />
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

export default Banner;
