import { Download, Share, X } from "lucide-react";
import { useInstallPrompt } from "../hooks/useInstallPrompt";

export function InstallBanner() {
  const { canInstall, isStandalone, isIOS, isDismissed, promptInstall, dismiss } =
    useInstallPrompt();

  // Don't show if already installed, dismissed, or no install option available
  if (isStandalone || isDismissed) return null;
  if (!canInstall && !isIOS) return null;

  return (
    <div className="flex items-center gap-3 border-b border-border bg-card px-4 py-2.5 text-sm">
      {isIOS ? (
        <>
          <Share className="size-4 shrink-0 text-muted-foreground" />
          <p className="flex-1 text-foreground">
            Install XTablo: tap <span className="font-medium">Share</span> then{" "}
            <span className="font-medium">Add to Home Screen</span>
          </p>
        </>
      ) : (
        <>
          <Download className="size-4 shrink-0 text-muted-foreground" />
          <p className="flex-1 text-foreground">Get the app for a faster, native experience</p>
          <button
            type="button"
            onClick={promptInstall}
            className="shrink-0 rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90"
            aria-label="Install app"
          >
            Install
          </button>
        </>
      )}
      <button
        type="button"
        onClick={dismiss}
        className="shrink-0 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
        aria-label="Dismiss"
      >
        <X className="size-4" />
      </button>
    </div>
  );
}
