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

/**
 * Title component for SwipeableListItem.Content
 * 
 * @example
 * ```tsx
 * <SwipeableListItem.Content>
 *   <SwipeableListItem.Title numberOfLines={1}>
 *     John Doe
 *   </SwipeableListItem.Title>
 * </SwipeableListItem.Content>
 * ```
 */
export const SwipeableListItemTitle: React.FC<SwipeableListItemTitleProps> = ({
  children,
  numberOfLines = 1,
  style,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);

  return (
    <PlayyText
      BodyEmphasized
      numberOfLines={numberOfLines}
      style={[styles.title, style]}
      color={colors.labels_primary}>
      {children}
    </PlayyText>
  );
};

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    title: {
      marginBottom: 2,
    },
  });