import React from 'react';
import { Dimensions } from 'react-native';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SBox } from '../../common/s-components/layout/s-box';
import { EMAIL_TEXT } from '../constants';
import { TUserData } from '../../auth/types';
import { theme } from '../../app/theme';
import { SLineLabel } from '../../common/s-components/s-line-label';

const { width: DEVICE_WIDTH } = Dimensions.get('window');

export type TProps = {
  userData: TUserData;
};

export const ProfileCard: React.FC<TProps> = props => {
  const { userData } = props;
  const { email } = userData;

  return (
    <SBox alignItems="center" mt={-48}>
      <SBox
        mt={87}
        bg={theme.colors.fiord}
        borderRadius={8}
        width={DEVICE_WIDTH - 32}
      >
        <SBox pl={16} pt={13} pb={15}>
          <SBox flexDirection="row" alignItems="center">
            <SBox mr={23} mt={2}>
              <SH6 color="periwinkleGray">{EMAIL_TEXT}</SH6>
            </SBox>
            <SBox maxWidth={DEVICE_WIDTH - 121}>
              <SLineLabel numberOfLines={1}>{email}</SLineLabel>
            </SBox>
          </SBox>
        </SBox>
      </SBox>
    </SBox>
  );
};