import React, { FC } from 'react';

import css from './index.module.css';

interface FieldProps {
  label: string;
  value: string;
}

export interface AccountInformationProps {
  email?: FieldProps;
  firstName?: FieldProps;
  lastName?: FieldProps;
  zip?: FieldProps;
  street?: FieldProps;
  additionalInformation?: FieldProps;
  city?: FieldProps;
  company?: FieldProps;
  streetNo?: FieldProps;
  phone?: FieldProps;
}

const AccountInformation: FC<AccountInformationProps> = ({
  email,
  lastName,
  firstName,
  street,
  zip,
  city,
  company,
  streetNo,
  additionalInformation,
  phone,
}) => (
  <div className={css.accountInformation}>
    <div className={css.accountInformation__itemColumns}>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {lastName && lastName.label}
          </div>
          <div className={css.accountInformation__value}>
            {lastName && lastName.value}
          </div>
        </div>
      </div>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {firstName && firstName.label}
          </div>
          <div className={css.accountInformation__value}>
            {firstName && firstName.value}
          </div>
        </div>
      </div>
    </div>

    {company && company.value && (
      <div className={css.accountInformation__item}>
        <div className={css.accountInformation__label}>
          {company && company.label}
        </div>
        <div className={css.accountInformation__value}>
          {company && company.value}
        </div>
      </div>
    )}

    <div className={css.accountInformation__itemColumns}>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {street && street.label}
          </div>
          <div className={css.accountInformation__value}>
            {street && street.value}
          </div>
        </div>
      </div>
      {streetNo && streetNo.value && (
        <div className={css.accountInformation__itemColumn}>
          <div className={css.accountInformation__item}>
            <div className={css.accountInformation__label}>
              {streetNo && streetNo.label}
            </div>
            <div className={css.accountInformation__value}>
              {streetNo && streetNo.value}
            </div>
          </div>
        </div>
      )}
    </div>

    {additionalInformation && additionalInformation.value && (
      <div className={css.accountInformation__item}>
        <div className={css.accountInformation__label}>
          {additionalInformation && additionalInformation.label}
        </div>
        <div className={css.accountInformation__value}>
          {additionalInformation && additionalInformation.value}
        </div>
      </div>
    )}

    <div className={css.accountInformation__itemColumns}>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {zip && zip.label}
          </div>
          <div className={css.accountInformation__value}>
            {zip && zip.value}
          </div>
        </div>
      </div>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {city && city.label}
          </div>
          <div className={css.accountInformation__value}>
            {city && city.value}
          </div>
        </div>
      </div>
    </div>

    <div className={css.accountInformation__itemColumns}>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {email && email.label}
          </div>
          <div className={css.accountInformation__value}>
            {email && email.value}
          </div>
        </div>
      </div>
      <div className={css.accountInformation__itemColumn}>
        <div className={css.accountInformation__item}>
          <div className={css.accountInformation__label}>
            {phone && phone.label}
          </div>
          <div className={css.accountInformation__value}>
            {phone && phone.value}
          </div>
        </div>
      </div>
    </div>
  </div>
);

export default AccountInformation;