/**
 * DialKey.tsx — one dialpad button (digit + letters), with press feedback and
 * haptics so tapping feels tactile like a real phone keypad. Long-press on 0
 * yields "+" for international dialling.
 */
import React, { useRef } from 'react';
import { Animated, Pressable, Text, StyleSheet, Vibration } from 'react-native';
import { colors, typography } from '../theme';

interface Props {
  digit: string;
  letters?: string;
  onPress: (d: string) => void;
  onLongPress?: (d: string) => void;
}

export default function DialKey({ digit, letters, onPress, onLongPress }: Props) {
  const scale = useRef(new Animated.Value(1)).current;

  const animate = (to: number) =>
    Animated.spring(scale, { toValue: to, useNativeDriver: true, speed: 50, bounciness: 0 }).start();

  return (
    <Pressable
      onPressIn={() => {
        animate(0.9);
        Vibration.vibrate(10); // subtle key click
      }}
      onPressOut={() => animate(1)}
      onPress={() => onPress(digit)}
      onLongPress={() => onLongPress?.(digit)}
      style={styles.hit}
    >
      <Animated.View style={[styles.key, { transform: [{ scale }] }]}>
        <Text style={styles.digit}>{digit}</Text>
        {!!letters && <Text style={styles.letters}>{letters}</Text>}
      </Animated.View>
    </Pressable>
  );
}

const SIZE = 74;
const styles = StyleSheet.create({
  hit: { width: SIZE, height: SIZE, alignItems: 'center', justifyContent: 'center' },
  key: {
    width: SIZE,
    height: SIZE,
    borderRadius: SIZE / 2,
    backgroundColor: colors.bgSecondary,
    alignItems: 'center',
    justifyContent: 'center',
  },
  digit: { ...typography.digit, color: colors.text, lineHeight: 40 },
  letters: { ...typography.digitLetters, color: colors.textSecondary, marginTop: -2 },
});