import { useState } from 'react';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const DiscoveryPasswordAuthenticate = () => {
  const stytch = useStytchB2BClient();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const authenticate = async () => {
    const response = await stytch.passwords.discovery.authenticate({
      email_address: email,
      password: password,
    });
    console.log('Authenticated:', response);
  };

  return (
    <form>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button onClick={authenticate} type="submit">Sign In</button>
    </form>
  );
};