type NetworkAdminSectionHeaderProps = {
  message: string | null;
  messageTone: "success" | "error";
};

export function NetworkAdminSectionHeader({ message, messageTone }: NetworkAdminSectionHeaderProps) {
  return (
    <>
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-primary">Shared network</p>
          <h2 className="mt-2 text-2xl font-semibold">Clubs + venues + vending machines</h2>
          <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
            Ballbox ya usa network core en Postgres. Delete safe: bloquea clubs, venues y máquinas cuando todavía tienen dependencias activas.
          </p>
        </div>
        <div className="rounded-full border border-border/70 px-4 py-2 text-sm text-foreground">ballbox postgres</div>
      </div>

      {message ? (
        <p
          className={
            messageTone === "success"
              ? "mt-4 rounded-2xl border border-primary/30 bg-primary/10 px-4 py-3 text-sm text-foreground"
              : "mt-4 rounded-2xl border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-foreground"
          }
        >
          {message}
        </p>
      ) : null}
    </>
  );
}