import type { JSX } from "preact";
import { Button } from "./Button.tsx";

interface LoadMoreProps {
  nextUrl?: string;
  loading?: boolean;
}

export function LoadMore({ nextUrl, loading = false }: LoadMoreProps): JSX.Element | null {
  if (!nextUrl) {
    return null;
  }

  return (
    <div className="load-more-container text-center py-4 border-t border-zinc-200 dark:border-zinc-700">
      <Button
        variant="outline"
        size="md"
        disabled={loading}
        hx-get={nextUrl.replace("/waitlist?", "/waitlist/load-more?")}
        hx-target="closest .load-more-container"
        hx-swap="outerHTML"
        hx-on="htmx:beforeRequest: this.disabled = true; this.textContent = 'Loading...';"
      >
        {loading ? "Loading..." : "Load More"}
      </Button>
    </div>
  );
}