// app/test/page.tsx
'use client';

import { useEffect, useState } from 'react';

export default function TestPage() {
  const [user, setUser] = useState(null);
  const [loginStatus, setLoginStatus] = useState('');

  useEffect(() => {
    // Test GET request
    fetch('https://api.example.com/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);

  const handleLogin = async () => {
    // Test POST request
    const response = await fetch('https://api.example.com/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: 'admin',
        password: 'password123'
      })
    });

    const result = await response.json();
    setLoginStatus(response.ok ? 'Login successful' : `Error: ${result.error}`);
  };

  return (
    <div>
      <h1>MSW Test Page</h1>

      <section>
        <h2>User Data (GET)</h2>
        <pre>{JSON.stringify(user, null, 2)}</pre>
      </section>

      <section>
        <h2>Login Test (POST)</h2>
        <button onClick={handleLogin}>Login as Admin</button>
        <p>{loginStatus}</p>
      </section>
    </div>
  );
}