/* eslint-disable @typescript-eslint/no-explicit-any */

import styles from './account-steps.module.scss'
import countriesData from '../../../../../../data/countries.json'

interface PersonalAccountInfoProps {
  value: any;
  setData: any;
}

const PersonalAccountInfo = ({ value, setData }: PersonalAccountInfoProps) => {
  const { name, username, email, phone, gender, country } = value
  return (
    <div className={styles['steps']}>
      <h2>Personal Details</h2>
      <p>Update your personal details as they are in your bank accounts for KYC reasons</p>
      <div>
        <div className={styles['steps__row']}>
          <div>
            <label htmlFor="name">Full name *</label>
            <input
              type="text"
              placeholder="Enter your full name"
              value={name}
              onChange={(e) => setData('name', e.target.value)}
            />
          </div>

          <div>
            <label htmlFor="username">Username *</label>
            <input
              type="text"
              placeholder="Choose a username"
              value={username}
              onChange={(e) => setData('username', e.target.value)}
            />
          </div>
        </div>

        <div className={styles['steps__row']}>
          <div>
            <label htmlFor="firstname">Email address *</label>
            <input
              disabled
              type="email"
              placeholder="Enter your email address"
              value={email}
              onChange={(e) => setData('email', e.target.value)}
            />
          </div>

          <div>
            <label htmlFor="phone">Phone *</label>
            <input
              type="tel"
              placeholder="Enter your mobile number"
              value={phone}
              onChange={(e) => setData('phone', e.target.value)}
            />
          </div>
        </div>
        <div className={styles['steps__row']}>
          <div>
            <label htmlFor="gender">Gender *</label>
            <select value={gender} onChange={(e) => setData('gender', e.target.value)}>
              <option disabled selected value="">
                Select your gender
              </option>
              <option value="female">Female</option>
              <option value="male">Male</option>
            </select>
          </div>

          <div>
            <label htmlFor="country">Country of residence *</label>
            <select value={country} onChange={(e) => setData('country', e.target.value)}>
              <option disabled selected value="">
                Select country of residence
              </option>
              {countriesData?.map((singleCountry) => (
                <option key={singleCountry?.name} value={singleCountry?.name}>
                  {singleCountry?.name}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>

        <button>
          Update Profile
        </button>

    </div>
  )
}

export default PersonalAccountInfo