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

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

type CardState = {
    lastUpdate: Date
}

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

    tick() {
        this.setState({
            lastUpdate: new Date()
        })
    }

    componentWillMount() {
        this.tick()
    }

    componentDidMount() {
        setInterval(() => this.tick(), 1000)
    }

    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.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
                </Card.Text>
            </Card>);
    }
}

export default HCard;