import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function SignIn() {
  const [license, setLicense] = useState('');
  const [signature, setSignature] = useState('');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    signIn('credentials', { license, signature });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="license" className="block text-sm font-medium leading-6 text-gray-900">
          License
        </label>
        <div className="mt-2">
          <input
            type="text"
            name="license"
            id="license"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your license"
            value={license}
            onChange={(e) => setLicense(e.target.value)}
          />
        </div>
      </div>
      <div>
        <label htmlFor="signature" className="block text-sm font-medium leading-6 text-gray-900">
          Signature
        </label>
        <div className="mt-2">
          <input
            type="password"
            name="signature"
            id="signature"
            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            placeholder="Enter your signature"
            value={signature}
            onChange={(e) => setSignature(e.target.value)}
          />
        </div>
      </div>
      <button type="submit">Sign in</button>
    </form>
  );
}