/** @jsx jsx */

import { jsx, css } from '@emotion/css'
import { useState } from 'react'
import PropTypes from 'prop-types'

export function Example({ prefix }) {
    const [counter, setCounter] = useState(0)
    
    return [
        <p css={css`
        	margin-bottom: 1rem;
        `}>{prefix}: {counter}</p>,
        <button
            type="button"
            onClick={() => setCounter(counter + 1)}
        >Add</button>,
    ]
}
Example.propTypes = {
	prefix: PropTypes.string.isRequired,
}