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

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

import { ReactComponent as Logo } from './logo.svg';
import star from './star.svg';

<% if (styledModule && styledModule !== 'styled-jsx') { %>
const StyledApp = styled.div`<%= styleContent %>`;
<% }%>

<% if (classComponent) { %>
export class App extends Component {
  render() {
    return (
      <<%= wrapper %><% if ((!styledModule || styledModule === 'styled-jsx') && hasStyles) {%> className="app"<% } %>>
        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`${styleContent}\`}</style>` : `` %>
        <%= appContent %>
      </<%= wrapper %>>
    );
  }
}
<% } else { %>
export function App() {
  /*
   * Replace the elements below with your own. <% if (hasStyles) { %>
   *
   * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file. <% } %>
   */
  return (
    <<%= wrapper %><% if ((!styledModule || styledModule === 'styled-jsx') && hasStyles) {%> className="app"<% } %>>
      <%= styledModule === 'styled-jsx' ? `<style jsx>{\`${styleContent}\`}</style>` : `` %>
      <%= appContent %>
    </<%= wrapper %>>
  );
};
<% } %>

export default App;
