App store badge

'use client';

import * as React from 'react';
import { AppStoreBadge } from './app-store-badge';
import type { AppStore } from './app-store-badge-variants';

const STORES: { store: AppStore; name: string }[] = [
  { store: 'app-store', name: 'App Store' },
  { store: 'google-play', name: 'Google Play' },
  { store: 'mac-app-store', name: 'Mac App Store' },
  { store: 'galaxy-store', name: 'Galaxy Store' },
  { store: 'app-gallery', name: 'AppGallery' },
];

// A neutral placeholder: an app passes the store's official badge artwork instead.
function PlaceholderArtwork({ name }: { name: string }) {
  return (
    <span className="flex items-center justify-center gap-2 px-3 text-xs font-semibold whitespace-nowrap text-white in-data-[style=outline]:text-fg-primary">
      <svg
        aria-hidden="true"
        viewBox="0 0 20 20"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.67"
        className="size-5 shrink-0"
      >
        <rect x="3" y="3" width="14" height="14" rx="4" />
        <path d="M10 7v6M7 10h6" strokeLinecap="round" />
      </svg>
      {name}
    </span>
  );
}

export default function AppStoreBadgeDemo({ replay = 0 }: { replay?: number }) {
  const [pressed, setPressed] = React.useState(false);

  React.useEffect(() => {
    if (replay === 0) return;
    setPressed(true);
    const timer = window.setTimeout(() => setPressed(false), 240);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex w-full max-w-3xl flex-col gap-8">
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-1">
          <p className="text-lg font-semibold text-primary">Get the mobile app</p>
          <p className="text-sm text-tertiary">
            Track your tasks on your phone and get alerts when something changes.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          {STORES.slice(0, 2).map(({ store, name }, index) => (
            <AppStoreBadge
              key={store}
              store={store}
              size="lg"
              href="#"
              data-pressed={index === 0 && pressed ? '' : undefined}
            >
              <PlaceholderArtwork name={name} />
            </AppStoreBadge>
          ))}
        </div>
      </div>
      <div className="dark flex flex-wrap gap-2 rounded-xl bg-primary p-6">
        {STORES.slice(0, 2).map(({ store, name }) => (
          <AppStoreBadge key={store} store={store} size="lg" badgeStyle="outline" href="#">
            <PlaceholderArtwork name={name} />
          </AppStoreBadge>
        ))}
      </div>
      <div className="flex flex-wrap gap-2">
        {STORES.map(({ store, name }) => (
          <AppStoreBadge key={store} store={store} href="#">
            <PlaceholderArtwork name={name} />
          </AppStoreBadge>
        ))}
      </div>
    </div>
  );
}