import React, { Component } from 'react';
import { FunctionComponent } 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" }}>
                <Row className="no-gutters">
                    <Col md={7} className="border-right my-auto">
                        <h3 className="text-center">{this.props.title}</h3>
                    </Col>

                    <Col md={5}>
                        <Card.Body>
                            <Card.Text className="text-center">
                                {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;