import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { AntDesign } from '@expo/vector-icons';

const index = () => {
  const todo = [

  ];
  return (
    <>
      <View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "white", textAlign: "center"}}>All</Text>
        </Pressable>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
          <Text style={{color: "white", textAlign: "center"}}>Work</Text>
        </Pressable>
        <Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
          <Text style={{color: "white", textAlign: "center"}}>Personal</Text>
        </Pressable>
        <Pressable>
          <AntDesign name="plus" size={24} color="black" />
        </Pressable>
      </View>
      <ScrollView style={{flex:1, backgroundColor: "white"}}>
          <View style={{padding: 10}}>
            {todo?.length > 0 ? (
              <View></View>
            ) : (
              <View style={{flex:1, justifyContent:"center", alignItems:"center", marginTop:150, marginLeft:"auto", marginRight:"auto"}}>
                <Image 
                style={{width: 100, height: 100, resizeMode: "containe"}}
                source={{
                  uri:"./assets/images/to-do.png",
                }}
                />
                <Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! No task for today</Text>
                <Pressable style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
                  <Text style={{fontSize:16, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
                </Pressable>
              </View>
            )}
          </View>
      </ScrollView>
    </>
  )
}

export default index

const styles = StyleSheet.create({})