import { Box } from '@/components/ui/box';
import { Button, ButtonText } from '@/components/ui/button';
import { Center } from '@/components/ui/center';
import { HStack } from '@/components/ui/hstack';
import { Text } from '@/components/ui/text';
import { useCounterDispatch, useCounterState } from '@/states/CounterProvider';

export default function IndexPage() {
  const state = useCounterState();
  const dispatch = useCounterDispatch();

  return (
    <Box className="flex-1 items-center justify-center">
      <Box className="h-64 w-64 rounded-md border border-secondary-600 p-3">
        <Center>
          <Text className="text-lg font-semibold">Count: {state.count}</Text>
        </Center>
        <HStack className="w-full flex-row justify-between gap-0 p-0">
          <Text className="text-red-600">Text1</Text>
          <Box className="flex-1" />
          <Text className="text-blue-600">Text2</Text>
        </HStack>

        <Box className="flex-1" />
        <HStack className="h-10 w-full flex-row justify-between gap-0 bg-red-500 p-0">
          <Button onPress={() => dispatch({ type: 'INCREMENT' })}>
            <ButtonText>+</ButtonText>
          </Button>
          <Box className="flex-1" />
          <Button onPress={() => dispatch({ type: 'DECREMENT' })}>
            <ButtonText>-</ButtonText>
          </Button>
        </HStack>
      </Box>
    </Box>
  );
}
