'use client';

// import LoadingOverlay from '@/components/overlays/LoadingOverlay';
import React from 'react'

type Props = {
  isPending: boolean,
  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
} & Omit<React.FormHTMLAttributes<HTMLFormElement>, 'id'>;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props) {
  const handleSubmit = React.useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();
      onSubmit?.(event);
    },
    [onSubmit],
  );

  return (
    <form
      {...restProps}
      onSubmit={handleSubmit}
      className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
    >
      <div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
        {children}
        {/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
      </div>
    </form>
  )
}

export default AuthFormWrapper