Header - Copy this React, Tailwind Component to your project

Create a Sign In and Sign Up button on the right side of the header. These buttons should trigger a Modal component. The Modal should include: Sign In and sign up Component: Options to sign in using social media accounts. A form for manual sign-in with the following fields: Name (optional). Email (required). Phone Number: Includes a dropdown for country code selection. Password and Re-enter Password (for Sign Up only). Login button. Forget Password link: Opens a secure recovery process. All fields should have proper validation. Users cannot proceed until they enter correct information. For invalid inputs, display error messages. Behavior: When the user successfully logs in or signs up, close the Modal window and replace the Sign In/Sign Up buttons in the header with the user's profile icon. User Profile Button: Clicking on the profile icon opens a small, responsive pop-up window containing the following: Name (editable). Email (editable). Phone Number: With a country code selector. Change Password: A secure form for updating the password. Delete Account: A confirmation prompt before account deletion. Theme Toggle: A Dark Mode switch to dynamically change the entire UI theme. Ensure the design is compact, user-friendly, visually appealing, and fully responsive across different screen sizes.