import React, { Component } from 'react';
import './Hint.scss';
import Title from '../Typography/Title/Title';
import { Props } from './Hint.types';

class Hint extends Component<Props> {
  render() {
    const {
      children,
      title,
      className,
      style
    } = this.props;

    return (
      <article className={`app-hint ${className}`} style={style}>
        <header className="app-hint__header">
          <Title>{title}</Title>
        </header>
        <div className="app-hint__content">
          { children }
        </div>
      </article>
    );
  }
}

export default Hint;