[@@@ocaml.warning "-26-27"]

open React

let[@react.component] make ~pages ~active_page ?header ?footer () =
  let selected_class = "text-mana-100 font-medium" in
  let unselected_class = "text-mist-100 hover:text-mana-100" in
  <aside className="flex flex-col gap-y-2 w-auto min-w-32 max-w-64">
    (match header with Some h -> h | None -> null)
    <nav className="flex flex-col gap-y-1 mt-2">
      ( List.map
          (fun (label, href) ->
            let className =
              if href = active_page then selected_class else unselected_class
            in
            <a href className key=href>(string label)</a> )
          pages
      |> Array.of_list |> array )
    </nav>
    (match footer with Some f -> f | None -> null)
  </aside>