import React from 'react';
import {View} from 'react-native';
import {HorizontalButtonGroup, Typography} from '@components';

import {styles} from './styles';

interface Props {
  options: string[];
  value?: string;
  onChange: (value: string) => void;
  hints?: {
    low: string;
    high: string;
  };
}

function RatingQuestion({options, value, onChange, hints}: Props) {
  return (
    <>
      <HorizontalButtonGroup
        options={options.map(option => ({id: option, label: option}))}
        selected={value || ''}
        onChange={onChange}
        withLimitedOptions={false}
      />
      {hints && (
        <View style={styles.hints}>
          <Typography weight="semiBold" variant="xxs">
            {hints.low}
          </Typography>
          <Typography weight="semiBold" variant="xxs">
            {hints.high}
          </Typography>
        </View>
      )}
    </>
  );
}

export default RatingQuestion;