'use client'

import styles from '@/app/styles/login.module.scss';
import { useActionState } from 'react';
import { registration } from '@/app/actions/auth';

export default function RegisterForm() {
	const [state, formAction, isPending] = useActionState(
		registration,
		undefined,
	);

	return (
		<form action={(e) => {
			formAction(e);
		}}>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']} ${styles['required']}`}
				>
					Полное имя
				</label>
				<input
					type="text"
					id="full_name"
					name="full_name"
					className={`${styles['form-input']}`}
					placeholder="Иванов Иван Иванович"
					defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
				/>
				{state?.error?.full_name && (
					<p className="text-sm text-red-500">{state?.error?.full_name}</p>
				)}
			</div>
			<div className={`${styles['form-row']}`}>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Email адрес</label>
					<input
						type="text"
						id="email"
						name="email"
						className={`${styles['form-input']}`}
						placeholder="ivan@example.com"
						defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
					/>
					{state?.error?.email && (
						<p className="text-sm text-red-500">{state?.error?.email}</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']}`}>Телефон</label>
					<input
						type="phone"
						id="phone"
						name="phone"
						className={`${styles['form-input']}`}
						placeholder="+7 (999) 123-45-67"
						defaultValue={state?.previousState?.phone ? state?.previousState?.phone : ''}
					/>
				</div>
			</div>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']}`}
				>
					Компания
				</label>
				<input
					type="text"
					id="company"
					name="company"
					className={`${styles['form-input']}`}
					placeholder="ООО «Ваша компания»"
					defaultValue={state?.previousState?.company ? state?.previousState?.company : ''}
				/>
			</div>
			<div className={`${styles['form-row']}`}>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Пароль</label>
					<input
						type="password"
						id="password" name="password"
						className={`${styles['form-input']}`}
						placeholder="Минимум 8 символов"
						defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
					/>
					{state?.error?.password && (
						<p className="text-sm text-red-500">{state?.error?.password}</p>
					)}
				</div>
				<div className={`${styles['form-group']}`}>
					<label className={`${styles['form-label']} ${styles['required']}`}>Подтвердите пароль</label>
					<input
						type="password"
						id="confirm_password"
						name="confirm_password"
						className={`${styles['form-input']}`}
						placeholder="Повторите пароль"
						defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
					/>
					{state?.error?.confirm_password && (
						<p className="text-sm text-red-500">{state?.error?.confirm_password}</p>
					)}
				</div>
			</div>
			<div className={`${styles['form-checkbox']}`} style={{ marginBottom: "20px" }}>
				<input type="checkbox" id="remember" name="remember" />
				<label>Я соглашаюсь с <a href="forgot-password" >условиями использования и политикой конфиденциальности</a></label>
			</div>
			<button type="submit" className={`${styles['btn']}`}>Создать аккаунт</button>
		</form>
	)
}