import type {NextPage} from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

import ReportDetails from '../components/ReportDetails';
import ReportNavigator from '../components/ReportNavigator';
import {useState} from "react";

const Home: NextPage = () => {
  const [currentReport, setCurrentReport] = useState<any>();
  return (
    <div className={styles.container}>
      <Head>
        <title>Back-Test Report</title>
        <meta name="description" content="Generated by create next app"/>
        <link rel="icon" href="/favicon.ico"/>
      </Head>
      <main className={styles.main}>
        <ReportNavigator onSelect={(reportEntry) => {
          setCurrentReport(reportEntry)
        }}/>
        {
          currentReport ? <ReportDetails basePath={'/output'} runID={currentReport.id}/> : null
        }
      </main>
    </div>
  )
}

export default Home
