Social button

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { Input } from '../input/input';
import { SocialButton, SocialButtonGroup } from './social-button';
import type { SocialProvider } from './social-button-variants';

// Neutral placeholder marks: an app passes the provider's official logo instead.
const MARKS: Record<'google' | 'facebook' | 'apple', string> = {
  google: 'M8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z',
  facebook:
    'M4 2.5h8A1.5 1.5 0 0 1 13.5 4v8a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 12V4A1.5 1.5 0 0 1 4 2.5Z',
  apple: 'M8 2.25 14 13.25H2L8 2.25Z',
};

function PlaceholderMark({ provider }: { provider: keyof typeof MARKS }) {
  return (
    <svg aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" fillRule="evenodd">
      <path d={MARKS[provider]} />
    </svg>
  );
}

const PROVIDERS: (keyof typeof MARKS & SocialProvider)[] = ['google', 'facebook', 'apple'];

export default function SocialButtonDemo({ 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-sm flex-col gap-8">
      <div className="flex flex-col gap-6 rounded-xl border border-secondary bg-primary p-6 shadow-xs">
        <div className="flex flex-col gap-1">
          <p className="text-lg font-semibold text-primary">Sign in to your account</p>
          <p className="text-sm text-tertiary">Use an account you already have, or your email.</p>
        </div>
        <SocialButtonGroup>
          {PROVIDERS.map((provider, index) => (
            <SocialButton
              key={provider}
              provider={provider}
              logo={<PlaceholderMark provider={provider} />}
              data-pressed={index === 0 && pressed ? '' : undefined}
            />
          ))}
        </SocialButtonGroup>
        <div className="flex items-center gap-2 text-sm text-tertiary">
          <span className="flex-1 border-t border-secondary" />
          or
          <span className="flex-1 border-t border-secondary" />
        </div>
        <div className="flex flex-col gap-4">
          <Input label="Email" type="email" placeholder="you@example.com" autoComplete="email" />
          <Button>Continue with email</Button>
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-secondary">Logo only</p>
        <SocialButtonGroup layout="row">
          {PROVIDERS.map((provider) => (
            <SocialButton
              key={provider}
              provider={provider}
              iconOnly
              logo={<PlaceholderMark provider={provider} />}
            />
          ))}
        </SocialButtonGroup>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-sm font-medium text-secondary">Color and brand themes</p>
        <div className="flex flex-wrap gap-3">
          <SocialButton
            provider="facebook"
            theme="color"
            iconOnly
            logo={<PlaceholderMark provider="facebook" />}
          />
          <SocialButton
            provider="facebook"
            theme="brand"
            iconOnly
            logo={<PlaceholderMark provider="facebook" />}
          />
          <SocialButton provider="apple" theme="brand" iconOnly logo={<PlaceholderMark provider="apple" />} />
          <SocialButton
            provider="google"
            theme="brand"
            iconOnly
            logo={<PlaceholderMark provider="google" />}
          />
        </div>
      </div>
    </div>
  );
}