import { FlatList, Text, View } from "react-native";

import { ToDoListItem } from "@/components/features/dashboard/todo/ToDoListItem";
import { Todo } from "@/store/models/Todo.model";

interface ToDoListProps {
  todos: Todo[];
  emptyMessage?: string;
}

export const ToDoList = ({ todos, emptyMessage }: ToDoListProps) => {
  if (todos?.length === 0) {
    return (
      <View className="flex-1 justify-center items-center py-10">
        <Text className="mt-2">{emptyMessage}</Text>
      </View>
    );
  }

  return (
    <FlatList
      data={todos}
      renderItem={({ item }) => <ToDoListItem item={item} />}
      keyExtractor={(item) => item.id}
      contentContainerStyle={{ paddingBottom: 20 }}
    />
  );
};