import * as React from 'react';
import {HTMLProps, ReactNode, SFC} from 'react';

export interface WelcomeProps extends HTMLProps<HTMLElement> {
  userName: string;
}

export const Welcome: SFC<WelcomeProps> = ({userName, children, ...otherProps}: WelcomeProps) => (
  <header className="page-header" {...otherProps}>
    <span>Welcome,</span>
    <h2 className="page-title">{userName}</h2>
    <div className="page-header-slot">{children}</div>
  </header>
);

Welcome.displayName = 'Welcome';