import React from "react";
import ModalImage from "./ModalImage";


export default function Tile({title, description, detailsLabel, detailsLink, images, htmlSnippets}) {
    return (
        <div className="tile is-child">
            <article className="box has-background-grey-lighter">
                <p className="subtitle"><b>{title}</b></p>
                {description && <p>
                    {description ||
                    ``
                    }
                    {<span dangerouslySetInnerHTML={{__html: htmlSnippets}}/>}
                </p>}
                {detailsLink &&
                <div style={{textAlign: 'right'}}>
                    <a href={detailsLink}>... more</a>
                </div>
                }
                {images &&
                <div>
                    {description && <br/>}
                    {images.map(img => <ModalImage src={img.src} altText={img.altText} thumbnailWidth={100}/>)}
                </div>
                }
            </article>
        </div>
    );
}

export function VerticalTileGroup({children, extraClasses}) {
    let classes = "tile is-parent is-vertical";
    return (
        <div className={extraClasses ? `${classes} ${extraClasses}` : classes}>
            {children}
        </div>
    );
}


{'avg_line_length': 31.4390243902439, 'max_line_length': 111, 'alphanum_fraction': 0.47013188518231186, 'licenses': ['MIT'], 'repository_name': 'OpenCHS/openchs-website', 'path': 'src/components/Tile.js', 'size': 1289, 'lang': 'JavaScript'}