import React from 'react';
import {StyleSheet} from 'react-native';
import PlayyText from '../PlayyText/PlayyText';
import {SwipeableListItemSubTitleProps} from './types';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';

/**
 * SubTitle component for SwipeableListItem.Content
 * 
 * @example
 * ```tsx
 * <SwipeableListItem.Content>
 *   <SwipeableListItem.Title>John Doe</SwipeableListItem.Title>
 *   <SwipeableListItem.SubTitle numberOfLines={2}>
 *     Hey, how are you doing today?
 *   </SwipeableListItem.SubTitle>
 * </SwipeableListItem.Content>
 * ```
 */
export const SwipeableListItemSubTitle: React.FC<SwipeableListItemSubTitleProps> = ({
  children,
  numberOfLines = 2,
  style,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);

  return (
    <PlayyText
      SubheadRegular
      numberOfLines={numberOfLines}
      style={[styles.subtitle, style]}
      color={colors.figure_secondary}>
      {children}
    </PlayyText>
  );
};

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    subtitle: {
      flex: 1,
    },
  });