import { FunctionalComponent, h } from "preact";
import * as style from "./style.css";
import { route } from 'preact-router';
import { base58UUID } from '../../util/uuid';

const Home: FunctionalComponent = () => {

    const openNewProject = () => {
        const uuid = base58UUID();
        route(`/p/${uuid}`);
    };

    return (
        <div class={`container ${style.home}`}>
            <div class="columns">
                <div class="column">
                    <div class="buttons is-right">
                        <button class="button is-primary"
                            onClick={openNewProject}>
                            <strong>+</strong>&nbsp;&nbsp;Nouveau projet
                        </button>
                    </div>
                    <div class="panel">
                        <p class="panel-heading">
                            Mes projets
                        </p>
                        <div class="panel-block">
                            <p class="control has-icons-left">
                                <input class="input" type="text" placeholder="Search" />
                                <span class="icon is-left">🔍</span>
                            </p>
                        </div>
                        <a class="panel-block">
                            <span class="panel-icon">🗒️</span>
                            Projet #1
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;