import React from 'react';
import {View, StyleSheet} from 'react-native';

/**
 * Selected state component for SwipeableListItem.Selection
 * Renders when the item is selected
 * 
 * @example
 * ```tsx
 * <SwipeableListItem.Selection>
 *   <SwipeableListItem.Selected>
 *     <Icon name="checkmark-circle" color="blue" />
 *   </SwipeableListItem.Selected>
 *   <SwipeableListItem.Unselected>
 *     <Icon name="circle" color="gray" />
 *   </SwipeableListItem.Unselected>
 * </SwipeableListItem.Selection>
 * ```
 */
export const SwipeableListItemSelected: React.FC<{children: React.ReactNode}> = ({children}) => {
  // This component is used for configuration only, children extracted by Selection
  return null;
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});