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

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

export const HCard: FunctionComponent<CardProps> = ({ title, content }) =>
    <Card bg="light" style={{ minWidth: "15rem" }}>
        <Row className="no-gutters">
            <Col md={7} className="border-right my-auto">
                <h3 className="text-center">{title}</h3>
            </Col>

            <Col md={5}>
                <Card.Body>
                    <Card.Text className="text-center">
                        {content}
                    </Card.Text>
                </Card.Body>
            </Col>
        </Row>
        <Card.Text className="border-top text-center">
            <small className="text-muted my-auto mx-2">Last updated 3 mins ago</small>
        </Card.Text>
    </Card>