import { Ionicons } from "@expo/vector-icons";
import { Pressable, Text, View } from "react-native";
import { NUMPAD_KEYS } from "@/src/utils/numpad";

type Props = {
  onKeyPress: (key: string) => void;
};

export function Numpad({ onKeyPress }: Props) {
  return (
    <View className="px-4">
      {NUMPAD_KEYS.map((row, i) => (
        <View key={i} className="flex-row gap-2 mb-2">
          {row.map((key) => (
            <Pressable
              key={key}
              onPress={() => onKeyPress(key)}
              className="flex-1 h-14 bg-gray-100 rounded-xl items-center justify-center active:bg-gray-200"
            >
              {key === "\u232B" ? (
                <Ionicons name="backspace-outline" size={20} color="#374151" />
              ) : (
                <Text className="text-xl font-medium text-gray-800">{key}</Text>
              )}
            </Pressable>
          ))}
        </View>
      ))}
    </View>
  );
}
