import React from 'react';
import { TextStyle, PressableProps } from 'react-native';
import ThemedButton from '@/components/theme/buttons/ThemedButton';
import ThemedText from '@/components/theme/default/ThemedText';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

const DEFAULT_FONT_SIZE = 16;

// Extend ThemedButton props (which already extends PressableProps)
type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
  width?: number;
  height?: number;
  text: string;
  fontSize?: number;
  textStyle?: TextStyle;
  containerStyle?: object;
  buttonStyle?: object;
};

const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
  width,
  height,
  text,
  fontSize,
  textStyle,
  containerStyle,
  buttonStyle,
  ...restProps // This includes onPress and all other Pressable props
}) => {
  const scheme = useColorScheme() ?? 'dark';

  return (
    <ThemedButton
      width={width}
      height={height}
      containerStyle={containerStyle}
      buttonStyle={buttonStyle}
      {...restProps}
    >
      <ThemedText
        style={[
          {
            color: Colors[scheme].background,
            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
          },
          textStyle,
        ]}
      >
        {text}
      </ThemedText>
    </ThemedButton>
  );
};

export default ThemedTextButton;
