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;
// TODO: Require that props.children be a string