import React from 'react';
import {View} from 'react-native';
import {IconThumbDown, IconThumbUp} from '@tabler/icons-react-native';
import {IconButton} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  yesOption: string;
  noOption: string;
  value?: string;
  onChange: (value: string) => void;
}

function YesNoQuestion({yesOption, noOption, value, onChange}: Props) {
  const {theme} = useTheme();
  return (
    <View style={styles.container}>
      <IconButton
        variant="secondary"
        Icon={IconThumbDown}
        backgroundColor={
          !!value && value === noOption
            ? theme.button.background.secondary.hover
            : theme.button.background.secondary.default
        }
        onPress={() => onChange(noOption)}
      />
      <IconButton
        variant="secondary"
        backgroundColor={
          !!value && value === yesOption
            ? theme.button.background.secondary.hover
            : theme.button.background.secondary.default
        }
        Icon={IconThumbUp}
        onPress={() => onChange(yesOption)}
      />
    </View>
  );
}

export default YesNoQuestion;