import PostEdit from "../../components/posts/PostEditor.tsx";
import { useNavigate } from "@solidjs/router";
import { createSignal, Show } from "solid-js";

export default function PublishPost() {
  const navigate = useNavigate();

  const [error, setError] = createSignal<string | null>(null);

  return (
    <>
      <div class="flex pt-1 border-b border-base-200">
        <a class="btn btn-ghost ml-[20px] w-12 h-12" href="/creators">
          <i class="fa-solid fa-angle-left"></i>
        </a>
        <div class="px-5 flex items-center">
          <p>Publish a new post</p>
        </div>
      </div>

      <div id="alerts">
        <Show when={error()}>
          <div role="alert" class="alert alert-error">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none"
                 viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="capitalize">{error()}</span>
          </div>
        </Show>
      </div>

      <PostEdit
        onError={setError}
        onPost={() => navigate("/creators")}
      />
    </>
  );
}