import React, { ButtonHTMLAttributes, DetailedHTMLProps, FunctionComponent } from 'react';
 
const MenuItem: FunctionComponent<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> = ({ children, ...props }) => {
    return (
        <button type="button" className={ `rounded-full py-4 px-6 bg-kelly-green ${props.onClick ? 'hover:bg-cheerful-green' : 'cursor-default'} text-white font-bold focus:ring-0 focus:outline-none transition-colors w-56` } { ...props }>
            { children }
        </button>
    );
};
 
export default MenuItem;