import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  TouchableOpacity,
  Image,
  Text,
  View,
  Modal,
  TextInput,
  ScrollView,
  ImageBackground,
  Animated,
} from 'react-native';

import {
  IMAGES,
  IconProfile,
  IconSocial,
  BgIntroduce,
  StoryIc,
} from '../../../values/images';
import Moment from 'moment';
import {viewStyles, btnStyles, txtStyles} from './styles';
import ButtonComponent from '../../../components/ButtonComponent';

const StoreScreen = ({userDetails}) => {
  //console.log("userDetails", userDetails)

  return (
    <View style={{backgroundColor: 'white', padding: 15, flexDirection: 'row'}}>
      <TouchableOpacity style={viewStyles.viewItemStory}>
        <View style={viewStyles.viewContainImg}>
          <Image
            source={{
              uri: 'https://meu.anawork.com' + userDetails.avatar,
            }}
            style={viewStyles.imgBackground}
          />
        </View>
        <ButtonComponent
          style={btnStyles.btnCreate}
          iconSource={StoryIc.IconAddStory}
          styleIcon={{width: 35, height: 35}}
        />
        <Text style={txtStyles.txtTitle}>Tạo tin</Text>
      </TouchableOpacity>
      <TouchableOpacity style={viewStyles.viewItemStory}>
        <ImageBackground
          source={BgIntroduce.BgStep1}
          imageStyle={{
            borderRadius: 10,
            opacity: 0.8,
            backgroundColor: '#E0E0E0',
          }}
          style={{
            height: '100%',
            width: '100%',
          }}>
          {/* <View style={viewStyles.viewContainImg}>
            <Image
              source={{
                uri: 'https://meu.anawork.com' + userDetails.avatar,
              }}
              style={viewStyles.imgBackground}
            />
          </View> */}
          <View
            style={{
              justifyContent: 'space-between',
              height: '100%',
              paddingLeft: 10,
              paddingBottom: 10,
              paddingTop: 10,
            }}>
            <View
              style={{
                borderRadius: 30,
                backgroundColor: '#1876F2',
                width: 40,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
                zIndex: 100,
              }}>
              <Image
                source={{
                  uri: 'https://meu.anawork.com' + userDetails.avatar,
                }}
                style={{width: 30, height: 30, borderRadius: 30}}
              />
            </View>
            <Text style={{color: 'white', textAlign: 'left'}}>
              Nguyễn Tiến Dũng
            </Text>
          </View>
        </ImageBackground>
      </TouchableOpacity>
    </View>
  );
};

export default StoreScreen;
