// src/components/PatternPad.tsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import GesturePassword from 'react-native-gesture-password';

type Props = {
  status?: 'normal' | 'right' | 'wrong';
  message?: string;
  onFinish: (pattern: string) => void; // masalan: "1-2-5-8"
};

export default function PatternPad({
  status = 'normal',
  message = 'Draw pattern',
  onFinish,
}: Props) {
  return (
    <View style={styles.wrap}>
      <GesturePassword
        interval={8}
        outerCircle
        allowCross
        status={status}
        message={message}
        onEnd={pwd => onFinish(pwd)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    width: '100%',
    height: 360,
    justifyContent: 'center',
    alignItems: 'center',
  },
});