import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";

type Props = {
  onTalk: () => void;
  onStop?: () => void;
  disabled?: boolean;
  isRecording?: boolean;
  isBusy?: boolean;
  talkLabel?: string;
  stopLabel?: string;
};

export function CharacterControls({
  onTalk,
  onStop,
  disabled,
  isRecording,
  isBusy,
  talkLabel,
  stopLabel = "Detener",
}: Props) {
  const label =
    talkLabel ??
    (isRecording ? "Soltá para enviar" : isBusy ? "Pensando..." : "Hablar");

  return (
    <View style={styles.row}>
      <Pressable
        style={[styles.btn, isRecording && styles.recording, disabled && styles.disabled]}
        onPress={onTalk}
        disabled={disabled || isBusy}
      >
        <Text style={styles.btnText}>{label}</Text>
      </Pressable>
      {onStop ? (
        <Pressable style={styles.secondary} onPress={onStop}>
          <Text style={styles.secondaryText}>{stopLabel}</Text>
        </Pressable>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  row: { gap: 12, alignItems: "center" },
  btn: {
    backgroundColor: "#C4A35A",
    paddingHorizontal: 36,
    paddingVertical: 16,
    borderRadius: 28,
    minWidth: 200,
    alignItems: "center",
  },
  recording: { backgroundColor: "#C45A5A" },
  disabled: { opacity: 0.5 },
  btnText: { color: "#1A140C", fontSize: 17, fontWeight: "700" },
  secondary: { padding: 8 },
  secondaryText: { color: "#B8AFA0" },
});