// 1. Create your endpoint with initial data
const endpoint = 'https://antimasslabs.com/api/mock/your-id';

// 2. GET — returns your initial JSON
const res1 = await fetch(endpoint);
const data1 = await res1.json();
console.log(data1.payload.length); // 3 items

// 3. POST — add a new item (ACTUALLY persisted)
await fetch(endpoint, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 4, title: 'New Item', done: false })
});

// 4. GET again — the new item is REALLY there
const res2 = await fetch(endpoint);
const data2 = await res2.json();
console.log(data2.payload.length); // 4 items ← real persistence!

// 5. DELETE — remove an item (ACTUALLY removed)
await fetch(endpoint, {
  method: 'DELETE',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 2 })
});

// 6. GET again — item is REALLY gone
const res3 = await fetch(endpoint);
const data3 = await res3.json();
console.log(data3.payload.length); // 3 items

'use client';
import { useState, useEffect } from 'react';

const API = 'https://antimasslabs.com/api/mock/my-todos';

export default function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  // Fetch todos on mount
  useEffect(() => {
    fetch(API).then(r => r.json()).then(d => setTodos(d.payload || []));
  }, []);

  // Add todo (REAL persistence)
  const addTodo = async () => {
    const newTodo = { id: Date.now(), title: input, done: false };
    await fetch(API, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newTodo),
    });
    setTodos([...todos, newTodo]);
    setInput('');
  };

  // Delete todo (REAL persistence)
  const deleteTodo = async (id) => {
    await fetch(API, {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    });
    setTodos(todos.filter(t => t.id !== id));
  };

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(t => (
          <li key={t.id}>
            {t.title}
            <button onClick={() => deleteTodo(t.id)}>✕</button>
          </li>
        ))}
      </ul>
    </div>
  );
}