import { useEffect, useState } from 'react';
import { useStytch } from '@stytch/nextjs';

export const WebAuthnAutofillSupport = () => {
const stytch = useStytch();
const [supportsAutofill, setSupportsAutofill] = useState<boolean>();

useEffect(() => {
  const checkAutofillSupport = async () => {
    try {
      setSupportsAutofill(await stytch.webauthn.browserSupportsAutofill());
    } catch (error) {
      console.error('Error checking WebAuthn autofill support:', error);
      setSupportsAutofill(false);
    }
  };

  checkAutofillSupport();
}, [stytch]);

return (
  <>
    {supportsAutofill === undefined ? (
      <p>Checking browser support...</p>
    ) : supportsAutofill ? (
      <p>Your browser supports WebAuthn autofill!</p>
    ) : (
      <p>Your browser does not support WebAuthn autofill.</p>
    )}
  </>
);
};