<% if (classComponent) { %>
import React, { Component } from 'react';
<% } else { %>
import React from 'react';
<% } %>

<% if (routing) { %>
import { Route, Link } from 'react-router-dom';
<% } %>

<% if (hasStyles) {
   if (styledModule && styledModule !== 'styled-jsx') {
    var wrapper = 'Styled' + className;
  %>
  import styled from '<%= styledModule %>';
  <% } else {
    var wrapper = 'div';
  %>
  <%= style !== 'styled-jsx' ? `import './${fileName}.${style}';` : '' %>
  <% }
} else { var wrapper = 'div'; } %>

/* eslint-disable-next-line */
export interface <%= className %>Props {
}

<% if (styledModule && styledModule !== 'styled-jsx') { %>
const Styled<%= className %> = styled.div`
  color: pink;
`;
<% }%>
<% if (classComponent) { %>
export class <%= className %> extends Component<<%= className %>Props> {
  render() {
    return (
      <<%= wrapper %>>
        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
        <p>Welcome to <%= name %>!</p>
        <% if (routing) { %>
          <ul>
            <li><Link to="/"><%= name %> root</Link></li>
          </ul>
          <Route path="/" render={() => <div>This is the <%= name %> root route.</div>} />
        <% } %>
      </<%= wrapper %>>
    );
  }
}
<% } else { %>
export const <%= className %> = (props: <%= className %>Props) => {
  return (
    <<%= wrapper %>>
      <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
      <h1>Welcome to <%= name %>!</h1>
      <% if (routing) { %>
        <ul>
          <li><Link to="/"><%= name %> root</Link></li>
        </ul>
        <Route path="/" render={() => <div>This is the <%= name %> root route.</div>} />
      <% } %>
    </<%= wrapper %>>
  );
};
<% } %>

export default <%= className %>;
