import React from 'react';
import styles from './details.module.scss';
import Incidents from '../../../molecules/incidents';
import Statistics from '../../../molecules/statistics';
import Lineups from '../../../molecules/lineups';
import Head2Head from '../../../molecules/head2head';
import Tabs from '~hooks/tabs';

export default function index({ serverData }) {
  return (
    <div className={styles.container}>
      <Tabs tabsAlign="left" activeTabClass={styles.active}>
        <div label="Info">
          <Incidents eventDetails={serverData.details} incidents={serverData.incidents} />
        </div>

        <div label="Statistics">
          {serverData.statistics ? (
            <Statistics eventDetails={serverData.details} statistics={serverData.statistics} />
          ) : (
            <span className={styles.notavailable}>
              Match statistics currently not available. Key match statistics will be displayed here.
            </span>
          )}
        </div>

        <div label="Lineups">
          <Lineups eventDetails={serverData.details} lineups={serverData.lineups} />
        </div>
        <div label="H2H">
          <Head2Head eventDetails={serverData.details} head2head={serverData.head2head} />
        </div>
      </Tabs>
    </div>
  );
}
