'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" />
						<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>
					<div className="form-group">
						<label className="form-label">
							{t('gender')}:
						</label>
						<select
							name="gender"
							className="form-input"
							value={selectedValue}
							onChange={(e) => setSelectedValue(e.target.value)}
						>
							<option value="male">
								{t('male')}
							</option>
							<option value="female">
								{t('female')}
							</option>
						</select>
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('birthday')}:
						</label>
						<input type="date" name="birthday" className="form-input" />
						<small>
							{t('used-to-send-congratulations')}
						</small>
					</div>
					<div className="form-group">
						<label className="form-label">
							{t('age')}:
						</label>
						<input type="text" name="age" className="form-input" />
						<small>
							{t('automatically-filled-in-based-on-date-of-birth')}
						</small>
					</div>

					<button type="submit" className="btn btn-primary">
						{t('save-changes')}
					</button>
				</form>
			</div >
		</div >
	)
}