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

type DuaSlideProps = {
    key?:number | string
    children?: React.ReactElement
    link?: string,
    img?: string,
    hyperTitle?: string,
    title?: string,
    subtitle?: string,
    innerText?: string,
    buttonText?: string,

}

const DuaSlide = ({children, img, hyperTitle, title,subtitle,innerText, buttonText, link} : DuaSlideProps) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
    const [viewportWidth, setViewportWidth] = useState(window.innerWidth);

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

        return () => {
            window.removeEventListener('resize', () => {setViewportWidth(window.innerWidth)});
          };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

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

export default DuaSlide;