import React from "react";
import Character from "./Character";

export default props => {
  const text = `${props.children}`;
  const chars = text.split("");
  return (
    <div {...props}>
      {chars.map((character, index) => (
        <Character key={index + character}>
          {character}
        </Character>
      ))};
    </div>
  );
};

// TODO: Require that props.children be a string