-module(docs@components@pages@hooks).
-compile([no_auto_import, nowarn_unused_vars]).

-export([hooks_page/2]).
-export_type([hooks_page_props/0]).

-type hooks_page_props() :: hooks_page_props.

-spec hooks_page(sprocket@socket:socket(), hooks_page_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
hooks_page(Socket, _) ->
    sprocket@component:render(
        Socket,
        [sprocket@html:article(
                [],
                [sprocket@html:h1([], [sprocket@html:text(<<"Hooks"/utf8>>)]),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Hooks are a core concept in Sprocket. They are a way to implement stateful logic, produce and consume side-effects,
                and couple a component to it's hierarchical context within the UI tree. They also make it easy to isolate and share
                stateful logic across components."/utf8>>
                            )]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Hook Basics"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Reducer Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Callback Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Effect Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Memo Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Channel Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Portal Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Client Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(<<"Custom Hooks"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(<<"COMING SOON"/utf8>>)]
                    )]
            )]
    ).