import { Pressable, StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { colors, fonts } from '../theme';

const gradients = {
  gold: [colors.goldBright, colors.gold],
  red: ['#f05a4f', colors.red],
  green: ['#39c377', '#1f7a44']
};

export default function CasinoButton({ label, onPress, variant = 'gold', disabled, size = 'default' }) {
  const textColor = variant === 'gold' ? '#2b1d0b' : '#f7f2e6';
  const isSmall = size === 'small';
  return (
    <Pressable onPress={onPress} disabled={disabled} style={styles.wrapper}>
      <LinearGradient
        colors={gradients[variant] || gradients.gold}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={[styles.button, isSmall && styles.buttonSmall, disabled && styles.disabled]}
      >
        <View style={styles.inner}>
          <Text style={[styles.text, isSmall && styles.textSmall, { color: textColor }]}>{label}</Text>
        </View>
      </LinearGradient>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    shadowColor: colors.shadow,
    shadowOpacity: 0.4,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 4 }
  },
  button: {
    borderRadius: 999,
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.2)'
  },
  buttonSmall: {
    paddingVertical: 9,
    paddingHorizontal: 18
  },
  inner: {
    alignItems: 'center'
  },
  text: {
    fontSize: 16,
    fontFamily: fonts.body,
    letterSpacing: 1,
    textTransform: 'uppercase'
  },
  textSmall: {
    fontSize: 13,
    letterSpacing: 0.7
  },
  disabled: {
    opacity: 0.5
  }
});