Multi Step Stepper - Copy this React, Tailwind Component to your project

I am building a multi step process using Next.js. I need help creating a stepper component that will display text at each step, with an "Agree" button to move the user to the next step. Also, it should support dark mode, where the component should dynamically switch between light and dark modes based on user preference or system settings. Requirements: The stepper should have at least three steps (can be extended later). The user clicks an "Agree" button to move to the next step. Dark Mode functionality should be built in, which adjusts the appearance of the component based on the user's theme preference. The "Agree" button should only appear after the user has read the content on each step. Use CSS Modules or Styled components for styling, and ensure that dark mode is styled appropriately. You can use useState for managing the step state, and useEffect for dark mode handling.