import * as React from 'react';
import classnames from 'classnames';

import styles from './styles.css';

interface TemplateReactProps {
  className?: string;
  heading: string;
}

/**
 * @name TemplateReact
 * @description tbd...
 */
const TemplateReact: React.FC<TemplateReactProps> = (props) => {
  const { children, className, heading } = props;

  // Styles
  const classes = classnames(className, styles.component);

  return (
    <div className={classes}>
      <h1 className="ui-heading">{heading}</h1>
      <span className="ui-subhead" />
      {children}
    </div>
  );
};

export { TemplateReact };
export type { TemplateReactProps };