/**
 * CallActionButton.tsx — the round in-call control (Mute / Speaker / Hold / etc).
 * Toggles between translucent (off) and solid white (on) like the native dialer.
 */
import React from 'react';
import { Pressable, Text, View, StyleSheet } from 'react-native';
import { colors, typography } from '../theme';

interface Props {
  icon: string;      // emoji/glyph — swap for react-native-vector-icons in prod
  label: string;
  active?: boolean;
  disabled?: boolean;
  onPress: () => void;
}

export default function CallActionButton({ icon, label, active, disabled, onPress }: Props) {
  return (
    <View style={styles.wrap}>
      <Pressable
        disabled={disabled}
        onPress={onPress}
        style={({ pressed }) => [
          styles.btn,
          active && styles.btnActive,
          pressed && { opacity: 0.7 },
          disabled && { opacity: 0.35 },
        ]}
      >
        <Text style={[styles.icon, active && styles.iconActive]}>{icon}</Text>
      </Pressable>
      <Text style={styles.label}>{label}</Text>
    </View>
  );
}

const SIZE = 74;
const styles = StyleSheet.create({
  wrap: { alignItems: 'center', width: 96 },
  btn: {
    width: SIZE,
    height: SIZE,
    borderRadius: SIZE / 2,
    backgroundColor: colors.callSurface,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btnActive: { backgroundColor: colors.callSurfaceActive },
  icon: { fontSize: 30, color: colors.callText },
  iconActive: { color: colors.callBg },
  label: { ...typography.label, color: colors.callTextSecondary, marginTop: 8 },
});