import React from 'react';
import Card from 'react-bootstrap/Card';
import { useAutoFocus, useFocusedElement } from '../FocusedElement';

export type Props = {
    heading?: string,
    position: string,
    timerange: string,
    company: string, 
    description: string
};

export default function JobCard(props: Props) {
    const focusRef = useAutoFocus<HTMLDivElement>('position ' + [props.position, props.company].join(', '))
    return (
        <Card ref={focusRef} className='job-card'>
            {props.heading && (
                <Card.Header>{props.heading}</Card.Header>
            )}
            <Card.Body>
                <Card.Title>{props.position}</Card.Title>
                <Card.Subtitle>
                    <span className='company-name'>{props.company}</span>, <span className='timerange'>{props.timerange}</span>
                    </Card.Subtitle>
                <Card.Text>{props.description}</Card.Text>
            </Card.Body>
        </Card>
    );
}