import React from 'react';
import {View, ViewProps} from 'react-native';
import Icon, {IconName} from '@components/Icon';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props extends ViewProps {
  color?: string;
  textColor?: string;
  label?: string;
  iconName?: IconName;
}

function PickerItem({
  color,
  label,
  children,
  style,
  iconName,
  textColor = COLORS.BLACK,
  ...props
}: Props) {
  return (
    <View
      style={[styles.container, {backgroundColor: color}, style]}
      {...props}>
      <View style={styles.row}>
        {!!iconName && <Icon name={iconName} />}
        {!!label && (
          <Text variant="subtitle1" color={textColor} style={styles.label}>
            {label}
          </Text>
        )}
      </View>
      {children}
    </View>
  );
}

export default PickerItem;
