import { Fragment } from 'react';
import PropTypes from 'prop-types';
import TopStudentScoreTable from './table';
import TopStudentScoreTab from './tab';
import TopStudentScoreButtons from './buttons';
import Segment from '../shared/segment';

function TopStudentScore(props) {
  const { rankType, number, studentScores } = props;

  return (
    <Fragment>
      <TopStudentScoreTab rankType={rankType} />
      {studentScores.length ? (
        <TopStudentScoreTable rankType={rankType} number={number} studentScores={studentScores} />
      ) : (
        <Segment textAlign='center'>
          نتایج دوره جاری را می‌توانید در انتهای دوره مشاهده کنید.
        </Segment>
      )}
      <TopStudentScoreButtons
        rankType={rankType}
        number={number}
        disableNext={!studentScores.length}
      />
    </Fragment>
  );
}

TopStudentScore.propTypes = {
  number: PropTypes.number.isRequired,
  rankType: PropTypes.string.isRequired,
  studentScores: PropTypes.array.isRequired
};

export default TopStudentScore;
