// withHooks

import esp from 'esoftplay/esp';
import { useTimeout } from 'esoftplay/timeout';
import LottieView from 'lottie-react-native';
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface EventPending_trxArgs {

}
export interface EventPending_trxProps {
  onPress: () => void
  order_type: string
  title: string
}
export default function m(props: EventPending_trxProps): any {
  const animation = useRef<LottieView>(null)
  const timeout = useTimeout()

  useEffect(() => {
    timeout(() => {
      animation.current?.play()
    }, 300);

  }, [])

  return (
    <TouchableOpacity onPress={() => {
      props.onPress()
    }} style={{ marginBottom: 10, flexDirection: 'row', borderWidth: 1, borderColor: '#DC2626', borderRadius: 5, backgroundColor: '#ffe3e3', alignContent: 'center', alignItems: 'center', marginHorizontal: 15, marginTop: 15, paddingLeft: 10 }}>
      <Text allowFontScaling={false} style={{ color: '#DC2626', flex: 1, fontWeight: 'bold', fontStyle: "normal", letterSpacing: 1 }} >{props.title}</Text>
      {/* <LibIcon name={'chevron-right'} /> */}
      <View style={{ alignItems: 'center' }} >
        <LottieView
          ref={animation}
          loop={true}
          style={{
            width: 45,
            height: 45,
          }}
          source={esp.assets('loading-red.json')}
        // OR find more Lottie files @ https://lottiefiles.com/featured
        // Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
        />
      </View>
    </TouchableOpacity>
  )
}