import { useDataState } from '@mks2508/mks-ui/react';

function UserProfile({ userId }) {
  const { state, load, reset } = useDataState();

  useEffect(() => {
    load(async () => {
      const res = await fetch(`/api/users/${userId}`);
      return res.json();
    });
  }, [userId, load]);

  if (state.status === 'loading') return <p>Loading...</p>;
  if (state.status === 'error') return <p>Error: {state.error.message}</p>;
  if (state.status === 'success') return <p>Hello, {state.data.name}</p>;

  return null;
}

const { state, load } = useDataState();

const fetchData = useCallback(() => {
  load(async () => {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error('Failed');
    return res.json();
  });
}, [load]);

// Retry on error
if (state.status === 'error') {
  return <Button onClick={fetchData}>Retry</Button>;
}