import { ScrollView } from "react-native";
import React, { useState } from "react";
import { View, Text } from "react-native-ui-lib";
import DumpList from "./DumpList";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { TextField } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";
import { TextInput } from "react-native-gesture-handler";

const BrainDumpPage = () => {
  const [searchText, setSearchText] = useState<string>("");

  return (
    <View>
      <ScrollView>
        <HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
        <View marginH-25>
          <View style={styles.searchField} centerV>
            <TextField
              value={searchText}
              onChangeText={(value) => {
                setSearchText(value);
              }}
              leadingAccessory={
                <Feather
                  name="search"
                  size={24}
                  color="#9b9b9b"
                  style={{ paddingRight: 10 }}
                />
              }
              placeholder="Search notes..."
            />
          </View>
          <DumpList searchText={searchText} />
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  searchField: {
    borderWidth: 1,
    borderColor: "#9b9b9b",
    borderRadius: 18,
    height: 48,
    paddingLeft: 10,
    marginVertical: 20,
  },
});

export default BrainDumpPage;