import React, {Component} from 'react';
import {Card, Col, Row} from 'react-bootstrap';

type CardProps = {
    title: string,
    content: string,
    update: Date
}


class HCard extends Component<CardProps> {
    constructor(props: CardProps) {
        super(props)
    }

    render() {
        return (
            <Card bg="light" style={{minWidth: "15rem"}} className="mx-auto">
                <Row className="no-gutters">
                    <Col md={7} className="border-right my-auto">
                        <h5 className="text-center my-auto">{this.props.title}</h5>
                    </Col>

                    <Col md={5}>
                        <Card.Body>
                            <Card.Text className="text-center my-auto">
                                {this.props.content}
                            </Card.Text>
                        </Card.Body>
                    </Col>
                </Row>
                <Card.Text className="border-top text-center">
                    <small className="text-muted my-auto mx-2">Last
                        updated {this.props.update.toLocaleTimeString('en-GB')}</small>
                </Card.Text>
            </Card>);
    }
}

export default HCard;