import { ButtonOne } from "../../../components/Buttons";
import { H4 } from "../../../components/Headings";
import { LoremMedium } from "../../../components/Loremipsum";

export function HPCollabs(){

    return (
        <div className="col">
            <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
                <div className="col">
                    <ButtonOne openclass="coll-cycletab" text="Overview" open="coll-overview"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne openclass="coll-cycletab" text="Collabs in 2024" open="colls2024"></ButtonOne>
                </div>
                <div className="col">
                    <ButtonOne openclass="coll-cycletab" text="LNP Handbook" open="Handbook"></ButtonOne>
                </div>
            </div>
            
            <div id="coll-overview" className="coll-cycletab" style={{display: "block"}}>
                <H4 id="coll-overview-heading" text=""/>
                <LoremMedium/>
            </div>
            <div id="colls2024" className="coll-cycletab" style={{display: "none"}}>
                <H4 id="colls2024-heading" text="Collaboration with Lingköping"/>
                <LoremMedium/>
            </div>
            <div id="Handbook" className="coll-cycletab" style={{display: "none"}}>
                <H4 id="Handbook-heading" text=""/>
                <LoremMedium/>
            </div>
        </div>
    )
}