import { __ } from '@wordpress/i18n';
import { __experimentalInputControl as InputControl } from '@wordpress/components';

import { useSettingsContext } from '../../contexts/SettingsContext';
import { createGenericHandler } from '../../utils/fieldHandlers';

import styles from './styles.module.scss';

const Address = () => {
  const { settings, updateSetting } = useSettingsContext();
  const handleChange = createGenericHandler(updateSetting);

  return (
    <div className={styles['address-container']}>
      <InputControl
        name="sender_postal_code"
        __next40pxDefaultSize
        label={__('Postal Code', 'nova-post-for-woocommerce')}
        value={settings?.sender_postal_code || ''}
        onChange={handleChange('sender_postal_code')}
      />

      <InputControl
        name="sender_street"
        __next40pxDefaultSize
        label={__('Street', 'nova-post-for-woocommerce')}
        value={settings?.sender_street || ''}
        onChange={handleChange('sender_street')}
      />

      <InputControl
        name="sender_building"
        __next40pxDefaultSize
        label={__('Building', 'nova-post-for-woocommerce')}
        value={settings?.sender_building || ''}
        onChange={handleChange('sender_building')}
      />
    </div>
  );
};

export default Address;
