sprocket

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

-export([header/2]).
-export_type([menu_item/0, header_props/0, menu_item_props/0]).

-type menu_item() :: {menu_item, binary(), binary()}.

-type header_props() :: {header_props, list(menu_item())}.

-type menu_item_props() :: {menu_item_props, menu_item()}.

-spec is_external_href(binary()) -> boolean().
is_external_href(Href) ->
    gleam@string:starts_with(Href, <<"http://"/utf8>>) orelse gleam@string:starts_with(
        Href,
        <<"https://"/utf8>>
    ).

-spec menu_item(sprocket@socket:socket(), menu_item_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
menu_item(Socket, Props) ->
    {menu_item_props, {menu_item, Label, Href}} = Props,
    Is_external = is_external_href(Href),
    sprocket@component:render(
        Socket,
        [sprocket@html:a(
                [sprocket@html@attribute:class(
                        <<"block p-5 border-b-2 border-transparent hover:border-blue-500"/utf8>>
                    ),
                    sprocket@html@attribute:href(Href) |
                    case Is_external of
                        true ->
                            [sprocket@html@attribute:target(<<"_blank"/utf8>>)];

                        false ->
                            []
                    end],
                [sprocket@html:text(Label) | case Is_external of
                        true ->
                            [sprocket@html:span(
                                    [sprocket@html@attribute:class(
                                            <<"text-gray-500 text-sm ml-2"/utf8>>
                                        )],
                                    [sprocket@html:i(
                                            [sprocket@html@attribute:class(
                                                    <<"fa-solid fa-arrow-up-right-from-square"/utf8>>
                                                )],
                                            []
                                        )]
                                )];

                        false ->
                            []
                    end]
            )]
    ).

-spec header(sprocket@socket:socket(), header_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
header(Socket, Props) ->
    {header_props, Menu_items} = Props,
    sprocket@component:render(
        Socket,
        [sprocket@html:'div'(
                [sprocket@html@attribute:class(
                        <<"flex flex-row justify-between border-b border-gray-200 dark:border-gray-600 min-h-[60px]"/utf8>>
                    )],
                [sprocket@html:'div'(
                        [sprocket@html@attribute:class(<<"p-2 mx-2"/utf8>>)],
                        [sprocket@html:'div'(
                                [sprocket@html@attribute:class(
                                        <<"italic bold text-2xl"/utf8>>
                                    )],
                                [sprocket@html:text(<<"⚙️ Sprocket"/utf8>>)]
                            ),
                            sprocket@html:'div'(
                                [sprocket@html@attribute:class(
                                        <<"text-gray-500 text-sm"/utf8>>
                                    )],
                                [sprocket@html:text(
                                        <<"Real-time server components in Gleam ✨"/utf8>>
                                    )]
                            )]
                    ),
                    sprocket@html:'div'(
                        [],
                        gleam@list:map(
                            Menu_items,
                            fun(Item) ->
                                sprocket@component:component(
                                    fun menu_item/2,
                                    {menu_item_props, Item}
                                )
                            end
                        )
                    )]
            )]
    ).