import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
}

export function Button({ title, onPress, variant = 'primary' }: ButtonProps) {
  let bg = 'bg-emerald-500';
  let text = 'text-slate-950';
  if (variant === 'secondary') {
    bg = 'bg-indigo-600';
    text = 'text-white';
  } else if (variant === 'danger') {
    bg = 'bg-rose-600';
    text = 'text-white';
  }

  return (
    <TouchableOpacity
      onPress={onPress}
      className={`py-3.5 px-6 rounded-2xl items-center justify-center ${bg} active:opacity-90`}
    >
      <Text className={`font-extrabold text-xs tracking-widest ${text}`}>
        {title}
      </Text>
    </TouchableOpacity>
  );
}
