interface FigureProps{
    pic1: string, 
    pic2?: string, 
    pic3?: string, 
    pic4?: string, 
    pic5?: string, 
    pic6?: string, 
    alt1: string,
    description: React.ReactNode | string,
    description2?: React.ReactNode | string, 
    num: string |number; 
    num2?: string |number;
    bg?: string; 
}


export function ThreeVertical({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
                <figure>
                <img src={pic1} alt={alt1} className="responsive-image"/>
                <img src={pic2} className="responsive-image"/>
                <img src={pic3} className="responsive-image"/>
                <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
            </figure>
           
        </div>
    )
}

export function TwoVertical({description, num, pic1, pic2, alt1, bg}:FigureProps){
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
        
        <figure>
            <img src={pic1} alt={alt1} className="responsive-image"/>
            <img src={pic2} className="responsive-image"/>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
       
    </div>
       
    )
}

export function TwoHorizontal({description, num,  pic1, pic2, alt1, bg}:FigureProps){
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
       
        <figure>
            <div className="row align-items-center">
                <div className="col">
                    <img src={pic1} alt={alt1} className="responsive-image"/>
                </div>
                <div className="col">
                    <img src={pic2} className="responsive-image"/>
                </div>
            </div>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
        
    </div>
        
    )
}

export function ThreeHorizontal({description, num, pic1, pic2, pic3, alt1, bg}:FigureProps){
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
        <figure>
            <div className="row align-items-center">
                <div className="col">
                    <img src={pic1} alt={alt1} className="responsive-image"/>
                </div>
                <div className="col">
                    <img src={pic2}className="responsive-image"/>
                </div>
                <div className="col">
                    <img src={pic3} className="responsive-image"/>
                </div>
            </div>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
       
    </div>
        
    )
}

export function OneFigure({description, num, pic1, alt1, bg}:FigureProps){
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
        
          <figure>
                    <img src={pic1} alt={alt1} className="responsive-image"/>
            <figcaption><b>Figure {num}.</b> <span>{description}</span></figcaption>
        </figure>
         
        </div>
       
    )
}


export function TwoFigureRow({description,description2, num, num2, pic1, pic2, bg}:FigureProps) {
    let background = ""; 
    if (bg){
        background = " bg-w"
    }
    return(
        <div className={"figure-wrapper" + background}>
        <figure>
            <div className="row align-items-center">
                <div className="col">
                    <img src={pic1} />
                </div>
                <div className="col">
                    <img src={pic2}/>
                </div>
            </div>
            <figcaption>
            <div className="row align-items-center">
                    <div className="col">
                    <b>Figure {num}:</b> {description}.
                    </div>
                    <div className="col">
                    <b>Figure {num2}:</b> {description2}.
            </div>
            </div>
            </figcaption>
        </figure>
        </div>
    )
}