import React from 'react';
import Card from 'react-bootstrap/Card';
import { Placeholder } from 'react-bootstrap';
import JobTags from './JobTags';
import { Job } from '@/PersonalDataTypes';
import md from '../Markdown';

export type Props = Job & {
    heading?: string
};

export function JobCardPlaceholder() {
    return <Card className='job-card'>
        <Card.Body>
        <Placeholder as={Card.Title} animation="glow">
            <Placeholder xs={6} />
        </Placeholder>
        <Placeholder as={Card.Text} animation="glow">
            <Placeholder xs={7} /> <Placeholder xs={4} /> <Placeholder xs={5} />{' '}
            <Placeholder xs={4} /> <Placeholder xs={3} />
        </Placeholder>
        </Card.Body>
    </Card>
}

export default function JobCard(props: Props) {
    return (
        <Card className='job-card'>
            {props.heading && (
                <Card.Header>{props.heading}</Card.Header>
            )}
            <Card.Body>
                <Card.Title>{props.position}</Card.Title>
                <Card.Subtitle>
                    {props.company && <span className='company-name'>{props.company}</span>}
                    {props.company && props.timerange && <span>, </span>}
                    {props.timerange && <span className='timerange'>{props.timerange}</span>}
                    </Card.Subtitle>
                <Card.Text className='multiline'>{md(props.description)}</Card.Text>
                {props.tags && <JobTags tags={props.tags} />}
            </Card.Body>
        </Card>
    );
}