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

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

const defaultProps = {
  entriesPerRow: 2,
  currentHeading: 'Currently',
}

export default function JobHistory(props: Props) {
  const {SizeWrapper, size} = useSize()

  const jobsList = size.width === 0 ? <JobsCardsPlaceholder /> : (
    size.width < 600 ? <JobsAccordion {...props} /> : <JobsCards {...props} />)

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