import React from 'react';
import Container from 'react-bootstrap/Container';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import JobCard from './JobCard';
import { partition } from '../utils';
import { Jobs } from '@/PersonalDataTypes';

export type Props = {
  jobs: Jobs,
  heading: string,
  entriesPerRow?: number,
  currentHeading?: string,
}

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

export default function JobHistory(props: Props) {
    const jobs = props.jobs
    const config = {...defaultProps, ...props}
    return (
    <Container>
        <h2>{config.heading}</h2>
        {jobs.current && (
        <Row>
          <Col>
            <JobCard heading={config.currentHeading} {...jobs.current} />
          </Col>
        </Row>
        )}
        {partition(jobs.previous, config.entriesPerRow).map((jobs, index) => (
        <Row key={index}>
          {(jobs.map((job, subindex) => (
          <Col key={index + '_' + subindex}>
            <JobCard {...job} />
          </Col>
          )))}
        </Row>
        ))}
    </Container>
    )
}