import { create } from "zustand"; type PlayButtonStore = { isPlaying: boolean; // Updated state name to reflect the play/pause status more clearly setIsPlaying: (value: boolean) => void; // Updated setter function name for clarity }; type PauseButtonStore = { isPaused: boolean; // Updated state name to reflect the play/pause status more clearly setIsPaused: (value: boolean) => void; // Updated setter function name for clarity }; type ResetButtonStore = { isReset: boolean; // Updated state name to reflect the play/pause status more clearly setReset: (value: boolean) => void; // Updated setter function name for clarity }; interface AnimationSpeedState { speed: number; setSpeed: (value: number) => void; } export const usePlayButtonStore = create<PlayButtonStore>((set) => ({ isPlaying: false, // Default state for play/pause setIsPlaying: (value) => set({ isPlaying: value }), // Update isPlaying state })); export const useResetButtonStore = create<ResetButtonStore>((set) => ({ isReset: false, // Default state for play/pause setReset: (value) => set({ isReset: value }), // Update isPlaying state })); export const usePauseButtonStore = create<PauseButtonStore>((set) => ({ isPaused: false, // Default state for play/pause setIsPaused: (value) => set({ isPaused: value }), // Update isPlaying state })); export const useAnimationPlaySpeed = create<AnimationSpeedState>((set) => ({ speed: 1, setSpeed: (value) => set({ speed: value }), }));