const Card = ({data, onClick}) => {
    const filename = data.filename.split("/")[2];
    const content = data.content;

    return(
        <div style={{marginTop: "20px"}}>
            <a href={"publications_detail.html?filename=" + filename} onClick={() => {
                onClick();
            }}>
                <div style={{display: "flex", height: "100%", background: "white",borderRadius: "10px"}}>
                    <img
                        style={{width: "208px", borderRadius: "10px 0px 0px 10px"}}
                        src={content.thumbnail && content.thumbnail != "null" ? "uploaded/" + content.thumbnail : "images/lablogo.png"}
                        alt="Placeholder image"
                    />
                    <div style={{display: "block", textAlign: "left", marginLeft: "20px", marginTop: "10px", marginBottom: "10px"}}>
                        <p style={{fontSize: "12px", color: "gray"}}>{content.publication_date} <span class="tag is-success">{content.type == 0 ? "論文誌" : content.type == 1 ? "国際学会論文" : content.type == 2 ? "国内学会論文" : content.type == 3 ? "受賞" : "その他"}</span> </p>
                        {content.type != 3 && <h3 style={{fontSize: "16px", color: "black"}}>{content.title}</h3>}
                        {content.type == 3 && <h3 style={{fontSize: "16px", color: "black"}}>{content.award_title}</h3>}
                        <div style={{display: "flex"}}><i class="fas fa-user has-text-success"></i><h5 style={{fontSize: "15px", color: "gray", marginLeft: "12px", lineHeight: "15px"}}> {content.author && content.author.replaceAll(",", ", ")}</h5></div>
                        <div style={{display: "flex", marginTop: "6px"}}><i class="fas fa-file-invoice  has-text-success"></i><h5 style={{fontSize: "15px", color: "gray", marginLeft: "13px", lineHeight: "15px"}}>{content.conference && content.conference != "" ? content.conference : (content.journal && content.journal != "" ? content.journal : "no")}</h5></div>
                    </div>
                </div>
            </a>
        </div>
    );
}