/**
 * Official App Store + Google Play badge anchors.
 *
 * Setup steps:
 * 1. Download official SVGs (use the /show/ path which returns clean SVG):
 *    https://www.svgrepo.com/show/303128/download-on-the-app-store-apple-logo.svg
 *    https://www.svgrepo.com/show/303139/google-play-badge-logo.svg
 * 2. Save to public/images/app-store-badge.svg + public/images/google-play-badge.svg.
 * 3. Add to lib/content.ts:
 *      export const app = {
 *        googlePlay: "https://play.google.com/store/apps/details?id=...",
 *        appStore:   "https://apps.apple.com/ae/app/.../id...",
 *      };
 *
 * next/image blocks raw SVG by default in Next 16 — keep plain <img>.
 */
import { app } from "@/lib/content";

type Props = {
  store: "appstore" | "googleplay";
  small?: boolean;
};

export function AppBadge({ store, small }: Props) {
  const isApple = store === "appstore";
  const href = isApple ? app.appStore : app.googlePlay;
  const src = isApple
    ? "/images/app-store-badge.svg"
    : "/images/google-play-badge.svg";
  const alt = isApple ? "Download on the App Store" : "Get it on Google Play";
  const label = isApple
    ? "Download on the App Store"
    : "Get it on Google Play";
  const width = small ? 132 : 160;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={label}
      className="group inline-flex transition duration-300 hover:-translate-y-0.5 hover:opacity-85"
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt={alt}
        width={width}
        height={small ? 40 : 48}
        className={
          small
            ? "h-auto w-[132px] max-w-full select-none"
            : "h-auto w-[140px] max-w-full select-none sm:w-[160px]"
        }
        loading="lazy"
        decoding="async"
        draggable={false}
      />
    </a>
  );
}

/** Both badges in a vertical stack. Use in footer Legal column. */
export function AppBadgeStack({ small }: { small?: boolean }) {
  return (
    <div className="flex flex-col items-start gap-2">
      <AppBadge store="appstore" small={small} />
      <AppBadge store="googleplay" small={small} />
    </div>
  );
}