'use client';

import { useState } from 'react';
import Link from 'next/link';

type Props = {
  type: 'signin' | 'signup';
};

export default function AuthForm({ type }: Props) {
  const [loading, setLoading] = useState(false);

  const isSignIn = type === 'signin';
  const heading = isSignIn ? 'Sign in to your account' : 'Create your LinkedIn account';
  const submitText = isSignIn ? 'Sign in' : 'Join now';
  const toggleLink = isSignIn ? '/signup' : '/signin';
  const toggleText = isSignIn ? "Don't have an account? Join now" : 'Already have an account? Sign in';

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    // Placeholder for real auth logic
    setTimeout(() => setLoading(false), 1000);
  };

  return (
    <section className="max-w-md w-full mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-semibold text-gray-800 mb-6">{heading}</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        {!isSignIn && (
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">
              Full name
            </label>
            <input
              id="name"
              type="text"
              required
              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
            />
          </div>
        )}
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-gray-700">
            Email address
          </label>
          <input
            id="email"
            type="email"
            required
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
        <div>
          <label htmlFor="password" className="block text-sm font-medium text-gray-700">
            Password
          </label>
          <input
            id="password"
            type="password"
            required
            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
        {isSignIn && (
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <input
                id="remember"
                type="checkbox"
                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <label htmlFor="remember" className="ml-2 block text-sm text-gray-900">
                Remember me
              </label>
            </div>
            <Link href="#" className="text-sm text-blue-600 hover:underline">
              Forgot password?
            </Link>
          </div>
        )}
        <button
          type="submit"
          disabled={loading}
          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500 disabled:opacity-50"
        >
          {loading ? 'Processing…' : submitText}
        </button>
      </form>
      <p className="mt-4 text-center text-sm text-gray-600">
        <Link href={toggleLink} className="font-medium text-blue-600 hover:underline">
          {toggleText}
        </Link>
      </p>
    </section>
  );
}