import { useEffect } from 'react';
import { useBaseBeautyState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BaseBeautyState';

// 1. Obtain the instance of BaseBeautyState
const { smoothLevel, whitenessLevel, ruddyLevel } = useBaseBeautyState();

// 2. Monitor real-time changes of smoothLevel, whitenessLevel, and ruddyLevel to drive UI updates
useEffect(() => {
  console.log('smoothLevel:', smoothLevel);
}, [smoothLevel]);

useEffect(() => {
  console.log('whitenessLevel:', whitenessLevel);
}, [whitenessLevel]);

useEffect(() => {
  console.log('ruddyLevel:', ruddyLevel);
}, [ruddyLevel]);

import { useBaseBeautyState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BaseBeautyState';

// Obtain the instance of BaseBeautyState
const { setSmoothLevel, setWhitenessLevel, setRuddyLevel } = useBaseBeautyState();

// Set smoothing (parameter range 0-9)
const handleSetSmooth = (smoothLevel) => {
  setSmoothLevel({ smoothLevel });
};

// Set whitening (parameter range 0-9)
const handleSetWhiteness = (whitenessLevel) => {
  setWhitenessLevel({ whitenessLevel });
};

// Set rosy tone (parameter range 0-9)
const handleSetRuddy = (ruddyLevel) => {
  setRuddyLevel({ ruddyLevel });
};

import { useBaseBeautyState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/BaseBeautyState;

// Obtain the instance of BaseBeautyState
const { setSmoothLevel, setWhitenessLevel, setRuddyLevel } = useBaseBeautyState;

// Reset beauty effects
const handleReset = () => {
  setSmoothLevel({ smoothLevel: 0 });
  setWhitenessLevel({ whitenessLevel: 0 });
  setRuddyLevel({ ruddyLevel: 0 });
};