import { ArtSlotView } from '../components/ArtSlotView';
import type { LoginMethod } from '@bigtech-sucks/core';

interface Props {
  onContinue: () => void;
  onLogin: (method: LoginMethod) => void;
}

const loginOptions: { method: LoginMethod; label: string }[] = [
  { method: 'passkey', label: 'Passkey' },
  { method: 'email', label: 'Email' },
  { method: 'proton', label: 'Proton' },
  { method: 'google', label: 'Google' },
  { method: 'github', label: 'GitHub' },
  { method: 'anonymous', label: 'Ride in quiet' },
];

export function WelcomeScreen({ onContinue, onLogin }: Props) {
  return (
    <section className="screen welcome-screen">
      <ArtSlotView slotId="title_illustration" />
      <h1>Draw the Line</h1>
      <p className="tagline">Your data doesn&apos;t have a party. Neither do we.</p>
      <p className="lede">
        A weary traveler&apos;s assessment — scope your exposure before you plan the crossing.
      </p>

      <div className="login-picker">
        <p className="section-label">How are you riding in?</p>
        <div className="login-grid">
          {loginOptions.map(({ method, label }) => (
            <button
              key={method}
              type="button"
              className="btn btn-secondary"
              onClick={() => {
                onLogin(method);
                onContinue();
              }}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      <button type="button" className="btn btn-primary" onClick={onContinue}>
        Meet the wagon boss
      </button>
    </section>
  );
}