import TodoList from "@/components/todo-list";
import { Button, ButtonText } from "@/components/ui/button";
import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token";
import { HStack } from "@/components/ui/hstack";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { useTodosCtx } from "@/store/todoProvider";
import { SafeAreaView } from "react-native-safe-area-context";

export default function DoneTab() {
  const { doneTodos, toggle, remove, clearDone } = useTodosCtx();

  return (
    <SafeAreaView className="flex-1 px-4 py-1 bg-white dark:bg-neutral-900">
      <VStack className="flex-1 gap-3">
        <Text className="text-2xl font-bold">완료한 일</Text>
        <TodoList
          data={doneTodos}
          onToggle={toggle}
          onRemove={remove}
          emptyMessage="모두 완료하셨습니다."
        />
        <HStack className="justify-end">
          <Button
            className="flex-1"
            variant={GS.variant.outline}
            action={GS.action.secondary}
            onPress={clearDone}
          >
            <ButtonText>완료한 일 모두 지우기</ButtonText>
          </Button>
        </HStack>
      </VStack>
    </SafeAreaView>
  );
}