'use client'

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

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

	const [selectedValue, setSelectedValue] = useState('male');

	const t = useTranslations('Global');

	return (
		<div className="settings-form">
			<div className="form-section">
				<h3 className="form-section-title">
					{t('personal-data')}
				</h3>
				<form action={formAction}>
					<div className="form-group">
						<label className="form-label">
							{t('full-name')}:
						</label>
						<input type="text" name="full_name" className="form-input" />
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('company')}:
						</label>
						<input type="text" name="company" className="form-input" />
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('email')}:
						</label>
						<input type="text" name="email" className="form-input" disabled={true}/>
						<small>
							{t('email-cant-change')}
						</small>
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('phone')}:
						</label>
						<input type="phone" name="phone" className="form-input" />
					</div>
					<button type="submit" className="btn btn-primary">
						{t('save-changes')}
					</button>
				</form>
			</div >
		</div >
	)
}