import React from "react";

export const characterClassName = char =>
  `character-${char.toString().toLowerCase().charCodeAt(0)}`;

const Character = ({ children: char, id }) => (
  <div id={id} className={`character ${characterClassName(char)}`}>
    {char}
  </div>
);

Character.propTypes = {
  children: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number
  ]).isRequired
};

export default Character;