import React from "react";
import PropTypes from "prop-types";

import styles from "./index.css";

const syntaxes = [
  {
    name: "CSS",
    id: "css"
  },
  {
    name: "SCSS",
    id: "scss"
  },
  {
    name: "Sass",
    id: "sass"
  },
  {
    name: "Less",
    id: "less"
  },
  {
    name: "SugarSS",
    id: "sugarss"
  },
  {
    name: "HTML",
    id: "html"
  },
  {
    name: "JSX",
    id: "jsx"
  },
  {
    name: "Markdown",
    id: "markdown"
  },
  {
    name: "Styled",
    id: "styled"
  }
];

const SyntaxSelect = ({ selectedSyntax, onSyntaxChange }) => {
  return (
    <select
      className={styles.syntax}
      onChange={e => {
        onSyntaxChange(e.target.value);
      }}
      value={selectedSyntax}
    >
      {syntaxes.map(syntax => (
        <option key={syntax.id} value={syntax.id}>
          {syntax.name}
        </option>
      ))}
    </select>
  );
};

SyntaxSelect.propTypes = {
  onSyntaxChange: PropTypes.func.isRequired,
  selectedSyntax: PropTypes.string.isRequired
};

export default SyntaxSelect;

@@ -375,48 +375,8 @@
   %7B%0A
-    name: %22JSX%22,%0A    id: %22jsx%22%0A  %7D,%0A  %7B%0A
     
@@ -436,14 +436,17 @@
 e: %22
-Styled
+CSS-in-JS
 %22,%0A 
@@ -457,14 +457,17 @@
 d: %22
-styled
+css-in-js
 %22%0A  

Add CSS-in-JS syntax (#149)