import React from 'react';
import {TouchableOpacity, StyleSheet} from 'react-native';
import {SwipeActionProps} from './types';
import {useTheme} from '../../theme/ThemeContext';

/**
 * Individual left swipe action component
 * Extends TouchableOpacity so it accepts all touchable props
 * 
 * @example
 * ```tsx
 * <SwipeableListItem.SwipeLeftAction
 *   backgroundColor="#007AFF"
 *   width={80}
 *   onPress={() => console.log('Action pressed')}>
 *   <View style={{alignItems: 'center'}}>
 *     <Icon name="checkmark" />
 *     <Text>Read</Text>
 *   </View>
 * </SwipeableListItem.SwipeLeftAction>
 * ```
 */
export const SwipeableListItemSwipeLeftAction: React.FC<SwipeActionProps> = ({
  children,
  backgroundColor,
  width = 80,
  style,
  ...touchableProps
}) => {
  const {colors} = useTheme();

  return (
    <TouchableOpacity
      style={[
        styles.actionContainer,
        {
          backgroundColor: backgroundColor ?? colors.colors_blue,
          width,
        },
        style,
      ]}
      activeOpacity={0.7}
      {...touchableProps}>
      {children}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  actionContainer: {
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 8,
  },
});