import React from 'react';
import {
    Route,
    Link
} from 'react-router-dom';
import {withTheme, injectSheet} from '../lib/theme';
import {withNamespaces} from "react-i18next";
import StyleGrid from '../lib/StyleGrid';

const styles = theme => ({
    wrapper: {
        fontSize: '14px',
        display: 'flex',
        marginTop: 'auto'
    },
    wrapperInner: {
        display: 'flex',
        flexWrap: 'wrap',
        marginLeft: 'auto',
        marginRight: 'auto',
        '& > p, & > a': {
            padding: theme.gutter.base + 'px',
            textAlign: 'center',
            margin: 'auto'
        }
    },
    copyright: {
        display: 'block',
        width: '100%',
        marginLeft: 'auto',
        marginRight: 'auto',
        [StyleGrid.smUp]: {
            width: 'auto'
        }
    },
    link: {}
});

class Footer extends React.Component {
    render() {
        const {classes, t, theme} = this.props;
        return (
            <div className={classes.wrapper} style={{borderTop: '1px solid ' + theme.textColorLight}}>
                <div className={classes.wrapperInner}>
                    <p className={classes.copyright}>
                        © {t('footer.copyright')} <a href='https://bemit.eu' className={classes.link}>bemit</a>
                        <small> UG (haftungsbeschränkt)</small>
                    </p>

                    <Route path="/:lng" render={(props) => (
                        <Link to={'/' + props.match.params.lng + '/info'}>Info</Link>
                    )}/>
                </div>
            </div>
        );
    }
}

export default withNamespaces('common')(withTheme(injectSheet(styles)(Footer)));
