// components/MobileBookingBar.tsx
// Fixed bar on small screens so the price and book action stay reachable
// without scrolling past the full facility list. Hidden on lg and up,
// where the sticky sidebar card does this job.
"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { detectLocalPrice, LocalPrice } from "@/lib/currency";

export default function MobileBookingBar({ usdAmount }: { usdAmount: number }) {
  const [local, setLocal] = useState<LocalPrice | null>(null);

  useEffect(() => {
    let cancelled = false;
    detectLocalPrice(usdAmount, 1).then((r) => { if (!cancelled) setLocal(r); });
    return () => { cancelled = true; };
  }, [usdAmount]);

  return (
    <div className="lg:hidden fixed bottom-0 inset-x-0 z-40 border-t border-sandDark bg-sand/95 backdrop-blur px-5 py-3 flex items-center justify-between gap-4">
      <div className="leading-tight">
        <span className="font-display text-xl font-semibold text-tealDark">
          ${usdAmount.toLocaleString()}
        </span>
        <span className="text-xs text-ink/60"> / night</span>
        {local && local.currencyCode !== "USD" && (
          <div className="text-xs text-ink/55">
            {local.isFixedPrice ? "" : "≈ "}{local.currencySymbol}{local.amount.toLocaleString()}
          </div>
        )}
      </div>
      <Link
        href="/book"
        className="focus-ring shrink-0 rounded-md bg-teal px-5 py-2.5 text-sm font-medium text-sand hover:bg-tealDark"
      >
        Check availability
      </Link>
    </div>
  );
}