/** @jsx jsx */
import * as React from "react";
import css from "@styled-system/css";
import { jsx } from "@emotion/core";

// Fill
export interface FillProps {
    children?: React.ReactNode;
}

const Fill: React.FC<FillProps> = ({
    children
}): React.ReactElement => {
    return (
        <div
            css={
            css({ 
                padding: 3,
                fontSize: 3,    
                bg: 'highlight',
                color: '#fff',
                fontFamily: 'helvetica',
                fontWeight: 'bold'
                // border: '1px solid',
                // borderColor: "red"
            })} >
            {children}
        </div>
    );
};

export default Fill;