// withHooks
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { LibFont } from 'esoftplay/cache/lib/font/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';

import React from 'react';
import { ScrollView, Text, View } from 'react-native';


export interface EventPoint_summaryArgs {

}
export interface EventPoint_summaryProps {

}
export default function m(props: EventPoint_summaryProps): any {
  return (
    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
      <EventHeader title='Point Saya' />
      <ScrollView>

        <View style={{ margin: 15, marginBottom: 0, padding: 10, borderRadius: 10, backgroundColor: '#059669', height: 120, overflow: 'scroll' }}>
          <View style={{ opacity: 0.3, height: 100, width: 150, top: -40, right: -40, position: 'absolute', }}>
            <LibIcon name='star-circle' size={150} color='#fff' />
          </View>
          <Text allowFontScaling={false} style={{ color: '#fff', fontFamily: LibFont('SFProText'), letterSpacing: 1, fontSize: 12 }}>{"POINT SAAT INI"}</Text>
          <Text allowFontScaling={false} style={{ color: '#fff', marginTop: 5, fontFamily: LibFont('DecoNumbers'), fontSize: 40, letterSpacing: 1.5 }}>{"1000"}<Text style={{ fontSize: 14, fontWeight: 'normal' }}>{" POINT"}</Text> </Text>
        </View>

        <View style={{ margin: 15, marginBottom: 0,backgroundColor:'#E1E3E4', borderWidth: 1, borderColor: '#C5C7C8', borderRadius: 10, padding: 10, flexDirection: 'row' }}>
          <View>
            <View style={{ padding: 5, borderRadius: 333, backgroundColor: '#059669' }}>
              <LibIcon name={'piggy-bank-outline'} color='#fff' />
            </View>
          </View>
          <View style={{ flex: 1, marginLeft: 10 }}>
            <Text allowFontScaling={false} style={{ fontSize: 12, letterSpacing: 1.5, fontWeight: 'bold' }}>{"CARA DAPAT POINT"}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 12, letterSpacing: 1 }}>{"Dapatkan poin dengan melakukan pembelian di area event dan menukarka struk pembelian ke booth penukaran"}</Text>
          </View>
        </View>

        <Text allowFontScaling={false} style={{ margin: 15, marginBottom: 0, letterSpacing: 1.5, fontWeight: 'bold' }}>RIWAYAT PENUKARAN</Text>

      </ScrollView>
    </View>
  )
}