import React from 'react';
{{#if useTypescript}}
import { {{interfaces}} } from '{{interfacePath}}';
{{/if}}
{{#if useStyles}}
import styles from './{{componentName}}.module.css';
{{/if}}
{{#if useTypescript}}
interface {{componentName}}Props {
{{#each props}}
{{name}}{{#if optional}}?{{/if}}: {{type}};
{{/each}}
}
{{/if}}
{{#if useFunctionalComponent}}
const {{componentName}} = ({{#if useTypescript}}props: {{componentName}}Props{{else}}props{{/if}}) => {
{{#if useState}}
{{#each states}}
const [{{name}}, set{{capitalizedName}}] = React.useState{{#if typed}}<{{type}}>{{/if}}({{defaultValue}});
{{/each}}
{{/if}}
{{#if useEffect}}
React.useEffect(() => {
{{effectContent}}
{{#if cleanup}}
return () => {
{{cleanupContent}}
};
{{/if}}
}, [{{dependencies}}]);
{{/if}}
{{#if methods}}
{{#each methods}}
const {{name}} = {{#if useTypescript}}({{#each params}}{{name}}: {{type}}{{#unless @last}}, {{/unless}}{{/each}}){{#if returnType}}: {{returnType}}{{/if}}{{else}}({{#each params}}{{name}}{{#unless @last}}, {{/unless}}{{/each}}){{/if}} => {
{{content}}
};
{{/each}}
{{/if}}
return (
{{jsxContent}}
);
};
{{else}}
class {{componentName}} extends React.Component{{#if useTypescript}}<{{componentName}}Props, {{stateType}}>{{/if}} {
{{#if constructor}}
constructor({{#if useTypescript}}props: {{componentName}}Props{{else}}props{{/if}}) {
super(props);
{{#if hasState}}
this.state = {
{{#each states}}
{{name}}: {{defaultValue}},
{{/each}}
};
{{/if}}
}
{{/if}}
{{#if lifecycle}}
{{#each lifecycle}}
{{name}}() {
{{content}}
}
{{/each}}
{{/if}}
{{#if methods}}
{{#each methods}}
{{name}} = {{#if useTypescript}}({{#each params}}{{name}}: {{type}}{{#unless @last}}, {{/unless}}{{/each}}){{#if returnType}}: {{returnType}}{{/if}}{{else}}({{#each params}}{{name}}{{#unless @last}}, {{/unless}}{{/each}}){{/if}} => {
{{content}}
};
{{/each}}
{{/if}}
render() {
return (
{{jsxContent}}
);
}
}
{{/if}}
export default {{componentName}};
