import React from "react";

import { Button } from "../Button";
import { View } from "../View";
import styles from "./styles";

type Props = {
  onChange?: (value: string) => void;
  options: { label?: string; value: string }[];
  value?: string;
};

const Radio = ({ onChange, options, value }: Props) => {
  return (
    <View style={styles.radio}>
      {options.map((option) => {
        const isSelected = value === option.value;
        return (
          <Button
            key={option.value}
            style={[styles.radioItem, isSelected ? styles.selectedItem : null]}
            textStyle={[
              styles.radioItemText,
              isSelected ? styles.selectedText : null,
            ]}
            title={option.label || option.value}
            onPress={() => {
              onChange(option.value);
            }}
          />
        );
      })}
    </View>
  );
};

export default Radio;