import React from 'react'

const AddressInfo = ({addressProps, setAddressProps, disabled=false}) => {
    const {phoneNumber, streetAddress, city, stateProvince, zipCode, country} = addressProps;

  return (
    <>
        <div>
            <label className='text-gray-700 text-sm font-semibold'>Phone number</label>
            <input type='tel' placeholder='Phone number' value={phoneNumber || ''} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
        </div>
        <div>
            <label className='text-gray-700 text-sm font-semibold'>Street Address</label>
            <input type='text' placeholder='Address' value={streetAddress || ''} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
        </div>
        <div>
            <label className='text-gray-700 text-sm font-semibold'>City</label>
            <input type='text' placeholder='City' value={city || ''} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
        </div>
        <div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
            <div>
              <label className='text-gray-700 text-sm font-semibold'>State/Province</label>
              <input type='text' placeholder='State/Province' value={stateProvince || ''} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
            </div>
            <div>
              <label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
              <input type='text' placeholder='Zip/Postal code' value={zipCode || ''} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
            </div>
        </div>
        <div>
            <label className='text-gray-700 text-sm font-semibold'>Country</label>
            <input type='text' placeholder='Country' value={country || ''} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
        </div>
    </>
  )
}

export default AddressInfo