"use client";

import { useAuth } from "@/components/AuthProvider";
import styles from "@/components/BusinessDetailsPage.module.css";

export function BusinessMeshkeeGate({
  children,
}: {
  children: (meshkeeId: string) => React.ReactNode;
}) {
  const { activeBusinessId, isLoading, isSuperAdmin } = useAuth();

  if (isLoading) {
    return <div className={styles.loading}>Loading…</div>;
  }

  if (!activeBusinessId) {
    return (
      <div className={styles.error} role="alert">
        <p className={styles.errorTitle}>
          {isSuperAdmin ? "No business selected" : "No business linked"}
        </p>
        <p className={styles.errorCopy}>
          {isSuperAdmin
            ? "Open a listing in the admin dashboard and use Manage business."
            : "This account has no Meshkee business. Contact support."}
        </p>
      </div>
    );
  }

  return <>{children(activeBusinessId)}</>;
}

export function BusinessListHeader({
  title,
  lead,
  action,
}: {
  title: string;
  lead: string;
  action?: React.ReactNode;
}) {
  return (
    <header className={styles.head}>
      <div>
        <h1 className={styles.title}>{title}</h1>
        <p className={styles.lead}>{lead}</p>
      </div>
      {action ? <div className={styles.headActions}>{action}</div> : null}
    </header>
  );
}