import { useState } from 'react'

function Counter() {
  // useState Hook
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  )
}

// count = aktuelle Value
// setCount = Funktion zum Updaten
// useState(0) = Initialwert

import { useState } from 'react'

function App() {
  // String State
  const [name, setName] = useState('Anna')

  // Number State
  const [age, setAge] = useState(25)

  // Boolean State
  const [isActive, setIsActive] = useState(true)

  // Array State
  const [items, setItems] = useState([1, 2, 3])

  // Object State
  const [user, setUser] = useState({
    name: 'Max',
    email: 'max@example.com'
  })

  return <div>...</div>
}

function Counter() {
  const [count, setCount] = useState(0)

  // ✅ RICHTIG - Direkt setzen
  const increment = () => {
    setCount(count + 1)
  }

  // ✅ RICHTIG - Updater Function
  const incrementSafe = () => {
    setCount(prevCount => prevCount + 1)
  }

  // ✅ Mehrfach updaten mit Updater Function
  const addThree = () => {
    setCount(c => c + 1)
    setCount(c => c + 1)
    setCount(c => c + 1)
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={addThree}>+3</button>
    </div>
  )
}

function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  })

  // ✅ RICHTIG - Spread Operator
  const updateName = (newName) => {
    setUser({
      ...user,
      name: newName
    })
  }

  // ✅ RICHTIG - Input Handler
  const handleChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    })
  }

  return (
    <form>
      <input
        name="name"
        value={user.name}
        onChange={handleChange}
      />
      <input
        name="email"
        value={user.email}
        onChange={handleChange}
      />
    </form>
  )
}

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build App'])

  // Hinzufügen
  const addTodo = (text) => {
    setTodos([...todos, text])
  }

  // Entfernen
  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index))
  }

  // Updaten
  const updateTodo = (index, newText) => {
    setTodos(todos.map((todo, i) =>
      i === index ? newText : todo
    ))
  }

  return (
    <div>
      {todos.map((todo, index) => (
        <div key={index}>
          <span>{todo}</span>
          <button onClick={() => removeTodo(index)}>
            Delete
          </button>
        </div>
      ))}
      <button onClick={() => addTodo('New Todo')}>
        Add
      </button>
    </div>
  )
}

// ✅ RICHTIG - Top Level
function Component() {
  const [state, setState] = useState(0)
  const [name, setName] = useState('')

  return <div>...</div>
}

// ❌ FALSCH - In Conditionals
function Component() {
  if (something) {
    const [state, setState] = useState(0) // Error!
  }
}

// ❌ FALSCH - In Loops
function Component() {
  for (let i = 0; i < 10; i++) {
    const [state, setState] = useState(i) // Error!
  }
}

// ❌ FALSCH - In nested Functions
function Component() {
  function helper() {
    const [state, setState] = useState(0) // Error!
  }
}