import { StyleSheet, Text, View, ScrollView } from 'react-native'
import React from 'react'
import fonts from '../../constants/fonts'
import colors from '../../constants/colors'
import { moderateScale } from '../../constants/metrics'
import Header from '../../components/atoms/Header/Header'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'

const OTPPage = props => {

  const {
    navigation,
    route
  } = props

  const styles = StyleSheet.create({
    signInText: {
      fontFamily: fonts.type.bold,
      color: colors().recessive,
      alignSelf: 'center',
      fontSize: moderateScale(24)
    },
    logoContainer: {
      padding: moderateScale(16),
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors().dominant,
      minHeight: 600
    },
    logo: {
      height: 320,
      width: '100%'
    }
  })

  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <NewscoutTitleHeader backButtonShown onBackClick={() => navigation.goBack()} />
      <Header headerStyle={{ elevation: 0 }} >
        <Text style={styles.signInText}>Forgot Password</Text>
        <View></View>
      </Header>
    </ScrollView>
  )
}

export default OTPPage

const styles = StyleSheet.create({})