import React from 'react';
import {Button} from '@components';
import {Option} from '@modules/peopleExperience/interfaces';

import {styles} from './styles';

interface Props {
  options: Option[];
  value?: Nullable<number>;
  onChangeValue: (value?: Nullable<number>) => void;
  disabled?: boolean;
}

function RatingInput({options, value, onChangeValue, disabled}: Props) {
  const onPress = (id: number) => () => onChangeValue(id);

  return (
    <>
      {options.map((option, index) => {
        const isSelected = index === value;
        return (
          <Button
            key={index}
            text={option.label}
            variant={isSelected ? 'secondaryActive' : 'secondary'}
            onPress={onPress(index)}
            disabled={disabled}
            size="sm"
            style={[
              styles.ratingButton,
              index === 0 && styles.firstButton,
              index === options.length - 1 && styles.lastButton,
            ]}
          />
        );
      })}
    </>
  );
}

export default RatingInput;