import React from 'react';
import Container from 'react-bootstrap/Container';
import useInWidthRange from '../../hooks/InWidthRange';
import { JobListProps } from './types';
import JobsAccordion from './JobsAccordion';
import JobsCards, { JobsCardsPlaceholder } from './JobsCards';

export type Props = {
  heading: string,
} & JobListProps

export default function JobHistory(props: Props) {
  const {SizeWrapper, inRange} = useInWidthRange(600)
 
  const jobsList = inRange === undefined
    ? <JobsCardsPlaceholder />
    : (inRange
      ? <JobsAccordion {...props} />
      : <JobsCards {...props} />)

  return (
    <Container fluid>
      <h2>{props.heading}</h2>
      <SizeWrapper>
        {jobsList}
      </SizeWrapper>
    </Container>
  )
}