import { supabase } from '@/lib/supabase';
import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
import { Alert, StyleSheet, AppState } from 'react-native';
import React from 'react';
import { TextStyle, PressableProps, DimensionValue } from 'react-native';
import ThemedButton from '@/components/theme/buttons/ThemedButton';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// Extend ThemedButton props (which already extends PressableProps)
type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
  width?: DimensionValue;
  height?: DimensionValue;
  fontSize?: number;
  fontWeight?: 'normal' | 'semibold' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  textStyle?: TextStyle;
  containerStyle?: object;
  buttonStyle?: object;
};

const Logout_Button: React.FC<ThemedTextButtonProps> = ({
  width,
  height,
  fontSize = 16,
  fontWeight = 'normal',
  textStyle,
  containerStyle,
  buttonStyle,
  ...restProps
}) =>  {
  const signOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) Alert.alert(error.message);
  };

  return (
    <ThemedTextButton
      text='Logout'
      width={width}
      height={height}
      fontSize={fontSize}
      fontWeight={fontWeight}
      containerStyle={containerStyle}
      buttonStyle={buttonStyle}
      onPress={() => signOut()}
      {...restProps}
    />
  );
};
export default Logout_Button;

const styles = StyleSheet.create({});