import { TouchableOpacity, Text } from 'react-native';
import React, { ComponentType } from 'react';

import { useTheme } from './ThemeContext';
import Icon from './Icon';

const noop = () => undefined;

export type Props = {
  readonly label?: string;
  readonly checked?: boolean;
  readonly onPress?: () => void;
};

const Radio: ComponentType<Props> = ({ label = '', checked = false, onPress = noop }: Props) => {
  const theme = useTheme();

  return (
    <TouchableOpacity onPress={onPress} style={theme.radio.wrapper}>
      {checked ? (
        <Icon icon="radio-active" color={theme.radio.activeIcon.color} />
      ) : (
        <Icon icon="radio-inactive" color={theme.radio.inactiveIcon.color} />
      )}
      <Text style={theme.radio.label}>{label}</Text>
    </TouchableOpacity>
  );
};

export default Radio;