import React from 'react';
import {Pressable, View} from 'react-native';
import Text from '@components/Text';
import {BottomModalMenuOption} from '@components/Modals/interfaces';
import Icon from '@components/Icon';

import {styles} from './styles';

interface Props {
  option: BottomModalMenuOption;
  onPress: (key: string) => void;
  isLast?: boolean;
}

/**
 * @deprecated Use `_HuGo/Modals` instead
 */
export function MenuItem({option, onPress, isLast}: Props) {
  const onItemPress = (key: string) => () => onPress(key);

  return (
    <Pressable
      onPress={onItemPress(option.key)}
      style={[styles.option, isLast && styles.lastItem]}>
      {option.leftIcon && (
        <View style={styles.iconContainer}>
          <Icon name={option.leftIcon} />
        </View>
      )}
      <Text variant="subtitle1" style={styles.optionText}>
        {option.label}
      </Text>
      {option.rightIcon && <Icon name={option.rightIcon} />}
    </Pressable>
  );
}
