// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';

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

export interface EventTurnstile_event_itemArgs {

}
export interface EventTurnstile_event_itemProps {
  image: string,
  title: string,
  start_date: string,
  end_date: string,
  onPress: () => void
}

export default function m(props: EventTurnstile_event_itemProps): any {
  let itemWidth = (LibStyle.width - 20)
  const styleId_bwKGY: any = { margin: 10, backgroundColor: '#fff', width: itemWidth, borderRadius: 10, overflow: 'hidden', ...LibStyle.elevation(2) }
  const styleId_Z16usbs: any = { borderRadius: 10, width: itemWidth, height: itemWidth / 3 }

  return (
    <TouchableOpacity onPress={props.onPress} style={styleId_bwKGY} >
      <LibPicture source={{ uri: props.image }} style={styleId_Z16usbs} resizeMode='cover' />
      <Text allowFontScaling={false} style={styleId_Z9MfLY}>{props.title}</Text>
      <View style={styleId_2oI6AB}>
        <LibIcon name='calendar-today' color="#9b9b9b" size={15} />
        <Text allowFontScaling={false} style={styleId_TCgQl}>{LibUtils.getDateRange(props.start_date, props.end_date, " - ")}</Text>
      </View>
    </TouchableOpacity>
  )
}

const styleId_Z9MfLY: any = { fontFamily: "ArialBold", fontSize: 12, color: "#000", margin: 10 }
const styleId_2oI6AB: any = { flexDirection: 'row', alignContent: 'center', alignItems: 'center', margin: 10, marginTop: -5 }
const styleId_TCgQl: any = { marginLeft: 5, fontFamily: "Arial", fontSize: 10, color: "#9b9b9b" }