import { makeObservable, observable, action } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import Link  from 'next/link';
import { Layout } from './shared/Layout';

class Index extends React.Component {
    x: number = 0;

    constructor(props) {
        super(props);
        makeObservable(this, {
            x: observable,
            clickMe: action,
        })
    }

    clickMe() {
        this.x += 1;
    }

    render() {
        return (
            <div>
                <button onClick={this.clickMe.bind(this)}>{this.x}</button>
                <Link href="/todo">Go to Todo</Link>
            </div>
        );
    }
}


export default function IndexPage() {
    return (<Layout title="Home">
        <Index></Index>
    </Layout>);
}