// App.tsx
import React, { useState } from 'react';
import {
  Checkbox,
  CheckboxItem,
  CheckboxValue,
  COLORS,
  Div,
  RadioButton,
  RadioButtonItem,
  RadioButtonValue,
} from 'cherag-ui';
import { StyleSheet } from 'react-native';
export default function App() {
  const [checkboxes, setCheckboxes] = useState<CheckboxValue[]>([]);
  const [selectedRadio, setSelectedRadio] = useState<RadioButtonValue>(1);
  return (
    <Div style={styles.container}>
      <Div style={styles.radioBtnGroup}>
        <RadioButton
          btnColor={COLORS.green}
          onChange={setSelectedRadio}
          selected={selectedRadio}
        >
          <RadioButtonItem value={1}>Radio button</RadioButtonItem>
          <RadioButtonItem value={2}>Radio button</RadioButtonItem>
        </RadioButton>
      </Div>
      <Checkbox values={checkboxes} onChange={setCheckboxes}>
        <CheckboxItem iconSize={22} textStyle={styles.checkboxText} value="1">
          Checkbox item 1
        </CheckboxItem>
        <CheckboxItem iconSize={22} textStyle={styles.checkboxText} value="2">
          Checkbox item 2
        </CheckboxItem>
        <CheckboxItem iconSize={22} textStyle={styles.checkboxText} value="3">
          Checkbox item 3
        </CheckboxItem>
      </Checkbox>
    </Div>
  );
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    marginTop: 30,
  },
  radioBtnGroup: {
    flexDirection: 'row',
  },
  checkboxText: {
    fontSize: 16,
  },
});