'use client'

import { useActionState, useState } from 'react';
import { useTranslations } from 'next-intl';

export default function SafetySetting() {
	const [errorMessage, formAction, isPending] = useActionState(
		(state: void | undefined, formData: FormData) => {
			console.log(formData);
		},
		undefined
	);
	const t = useTranslations('Global');

	return (
		<div className="settings-form">
			<div className="form-section">
				<h3 className="form-section-title">
					{t('security')}
				</h3>
				<form action={formAction}>
					<div className="form-group">
						<label className="form-label">
							{t('current-password')}:
						</label>
						<input type="password" name="current_password" className="form-input" />
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('new-password')}:
						</label>
						<input type="password" name="new_password" className="form-input" />
						<small>
							{t('minimum-8-characters')}
						</small>
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('confirm-password')}:
						</label>
						<input type="password" name="confirm_password" className="form-input" />
					</div>
					<button type="submit" className="btn btn-primary">
						{t('change-password')}
					</button>
				</form>
			</div>
		</div>
	)
}