import React, { useState, useEffect } from "react";
import './dua-slide.scss';

type DuaSlideProps = {
    children?: React.ReactElement
    link?: string,
    img: string,
    hyperTitle: string,
    title: string,
    subtitle?: string,
    innerText?: string,
    hasButton?: boolean,
    buttonText?: string,
}

const DuaSlide = ({children, img, hyperTitle, title, hasButton, buttonText, link} : DuaSlideProps) => {

    const [viewportWidth, setViewportWidth] = useState(window.innerWidth);

    useEffect(() => {
        window.addEventListener('resize', () => {setViewportWidth(window.innerWidth)});

        return () => {
            window.removeEventListener('resize', () => {setViewportWidth(window.innerWidth)});
          };
    }, [])

    return (
        <div className="slide row">
            <div className="col-5 slide--img-container">
                <img className="img-fluid" src={img}/>
            </div>
            <div className="col-5 slide--content-container">
                <p className="slide--content-container--hyper-title">{hyperTitle}</p>
                <p className="slide--content-container--title">{title}</p>
                {
                    hasButton &&
                    <div className="slide--content-container--btn-container">
                        <a href={link}>{buttonText}</a>
                    </div>
                }
                {children}
            </div>
        </div>
    );
}

export default DuaSlide;