import { Stack } from 'expo-router';
import { View } from 'react-native';

import { Checkbox } from '@/components/nativewindui/Checkbox';
import { Text } from '@/components/nativewindui/Text';

export default function CheckboxScreen() {
  return (
    <View className="flex-1 px-4 py-8">
      <Text variant="title1" className="pb-3 font-semibold">
        My Todo List
      </Text>
      <View className="border-border bg-card overflow-hidden rounded-lg border">
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Finish project report</Text>
          <Checkbox defaultChecked />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Buy groceries for dinner</Text>
          <Checkbox />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Read 10 pages of a book</Text>
          <Checkbox />
        </View>
        <View className="ios:ml-4 bg-border h-px w-full" />
        <View className="flex-row items-center justify-between gap-4 px-5 py-3">
          <Text>Call Mom to check in</Text>
          <Checkbox />
        </View>
      </View>
    </View>
  );
}