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>
      <h2>{props.heading}</h2>
      <SizeWrapper>
        {jobsList}
      </SizeWrapper>
    </Container>
  )
}