sflite/components/themed-butto...

import { Pressable, StyleSheet, Text } from 'react-native';

import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

type Variant = 'primary' | 'secondary' | 'ghost';

type Props = {
  title: string;
  onPress: () => void;
  variant?: Variant;
  disabled?: boolean;
  testID?: string;
};

export function ThemedButton({
  title,
  onPress,
  variant = 'primary',
  disabled,
  testID,
}: Props) {
  const theme = useColorScheme() ?? 'light';
  const tint = Colors[theme].tint;
  const textOnTint = Colors[theme].textOnTint;

  const backgroundColor =
    variant === 'primary' ? tint : 'transparent';
  const borderColor =
    variant === 'secondary' ? tint : 'transparent';
  const textColor =
    variant === 'primary'
      ? textOnTint
      : tint;

  return (
    <Pressable
      accessibilityRole="button"
      testID={testID}
      onPress={onPress}
      disabled={disabled}
      style={({ pressed }) => [
        styles.base,
        {
          backgroundColor,
          borderColor,
          opacity: disabled ? 0.5 : pressed ? 0.85 : 1,
        },
      ]}>
      <Text style={[styles.text, { color: textColor }]}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  base: {
    borderRadius: 10,
    borderWidth: 1,
    paddingHorizontal: 14,
    paddingVertical: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 15,
    fontWeight: '600',
  },
});