import { TabButtonRow } from "./Buttons";
import TimeHori, { CombiTimeHori } from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "../data/hptimelinedata";
export function HPTimeline(){
    return(
      <section id="Timeline" className="section">
        <p>Feel free to scroll trough our timeline and learn more about our extensive human-centric approach!</p>
        <div className="center">
        </div> 
        <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
        <ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/> 
        <BFHStyleTabs cla="timelinepersontabs" data={timelinedata}></BFHStyleTabs> 
      </section>
    )
  }

  let timelinebuttonrowdata = [
    {
      buttonname: "All", 
      node: <TimeHori tab="" ></TimeHori>, 
      cssname: "First",
      main: true
      
    },
    { 
      node: <TimeHori tab="Patient" ></TimeHori>,
      buttonname: "Patients", 
      cssname: "Patient"
    },
    {
      node: <TimeHori tab="Medical Professional" ></TimeHori>,
      buttonname: "Medical Professionals", 
      cssname: "Medical"
    },
    {
      node: <TimeHori tab="Academia" ></TimeHori>,
      buttonname: "Academia", 
      cssname: "Academia"
    },
    { 
      node: <TimeHori tab="Industry" ></TimeHori>,
      buttonname: "Industry", 
      cssname: "Industry"
    },
    { 
      node: <TimeHori tab="Milestone" ></TimeHori>,
      buttonname: "Milestones", 
      cssname: "Milestone"
    },
   { 
      node: <CombiTimeHori tab1="Education" tab2="Outreach" ></CombiTimeHori>,
      buttonname: "Education & Outreach", 
      cssname: "Education"
    },
    /*
    { 
      node: <TimeHori tab="Outreach" ></TimeHori>,
      buttonname: "Outreach", 
      cssname: "Outreach"
    } */
  ]
  

/* export function HPtimelineNew(data: Array<NodeDatensatz>){
  var timelinecards: React.ReactNode; 
  var interviewtabs: 

} */