"use strict";

import { View, Text, Animated } from 'react-native';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SignUpSummaryStep = ({
  styles,
  fadeAnim,
  slideAnim,
  colors,
  formData,
  isLoading,
  handleSignUp,
  prevStep
}) => /*#__PURE__*/_jsxs(Animated.View, {
  style: [styles.stepContainer, {
    opacity: fadeAnim,
    transform: [{
      translateX: slideAnim
    }]
  }],
  children: [/*#__PURE__*/_jsx(View, {
    style: styles.modernHeader,
    children: /*#__PURE__*/_jsx(Text, {
      style: [styles.stepTitle, {
        color: colors.text
      }],
      children: "Ready to join"
    })
  }), /*#__PURE__*/_jsxs(View, {
    style: styles.summaryContainer,
    children: [/*#__PURE__*/_jsxs(View, {
      style: styles.summaryRow,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.summaryLabel, {
          color: colors.secondaryText
        }],
        children: "Username:"
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.summaryValue, {
          color: colors.text
        }],
        children: formData.username
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: styles.summaryRow,
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.summaryLabel, {
          color: colors.secondaryText
        }],
        children: "Email:"
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.summaryValue, {
          color: colors.text
        }],
        children: formData.email
      })]
    })]
  }), /*#__PURE__*/_jsx(GroupedPillButtons, {
    buttons: [{
      text: 'Back',
      onPress: prevStep,
      icon: 'arrow-back',
      variant: 'transparent'
    }, {
      text: 'Create Account',
      onPress: handleSignUp,
      icon: 'checkmark',
      variant: 'primary',
      disabled: isLoading,
      loading: isLoading,
      testID: 'signup-button'
    }],
    colors: colors
  })]
});
export default SignUpSummaryStep;
//# sourceMappingURL=SignUpSummaryStep.js.map