'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

// Routes where the global "+ New server" CTA makes no sense — the wizard is
// itself the create flow and owns its own primary action.
const HIDDEN_PATHS: readonly string[] = ['/servers/new'];

/**
 * Mobile-only sticky bottom action bar. On phones the dashboard top header is
 * already tight with the nav icons; the primary action belongs in the thumb
 * zone, not crammed top-right. Hidden from `sm:` upward where the header has
 * room for the same button inline.
 */
export function MobileActionBar() {
  const pathname = usePathname();
  if (HIDDEN_PATHS.includes(pathname)) return null;

  return (
    <div
      className="fixed inset-x-0 bottom-0 z-40 border-t border-[--color-border] bg-[--color-bg-elevated]/95 backdrop-blur sm:hidden"
      style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 0.5rem)' }}
    >
      <div className="mx-auto flex max-w-7xl px-4 pt-2.5">
        <Link
          href="/servers/new"
          className="inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-md bg-[--color-accent] text-[14px] font-medium text-white transition-colors duration-200 active:bg-[#5557e8]"
        >
          + New server
        </Link>
      </div>
    </div>
  );
}