// In App.tsx or a new component like Counter.tsx
import React, { useState } from 'react';

function Counter() {
    // Declare a state variable 'count' and a function 'setCount' to update it
    const [count, setCount] = useState<number>(0); // Type 'number' for count

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div className="p-4 bg-green-100 rounded-md text-center">
            <p className="text-lg">Count: {count}</p>
            <button
                onClick={increment}
                className="mt-2 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"
            >
                Increment
            </button>
        </div>
    );
}

export default Counter;

// In a separate file, e.g., src/hooks/useFetch.ts
import { useState, useEffect } from 'react';

interface FetchState<T> {
    data: T | null;
    loading: boolean;
    error: string | null;
}

function useFetch<T>(url: string): FetchState<T> {
    const [data, setData] = useState<T | null>(null);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                setLoading(true);
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const result: T = await response.json();
                setData(result);
            } catch (err) {
                setError((err as Error).message);
            } finally {
                setLoading(false);
            }
        };

        // Only fetch if window is defined (client-side)
        if (typeof window !== 'undefined') {
            fetchData();
        }
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

// In a component that uses the hook, e.g., src/components/PostFetcher.tsx
import React from 'react';
// import useFetch from '../hooks/useFetch'; // Adjust path

interface Post {
    id: number;
    title: string;
    body: string;
}

const PostFetcher: React.FC = () => {
    // Using the custom hook to fetch data
    const { data, loading, error } = useFetch<Post>('https://jsonplaceholder.typicode.com/posts/1');

    if (loading) return <p>Loading post...</p>;
    if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;

    return (
        <div className="p-4 bg-green-100 rounded-lg shadow-md">
            <h3 className="text-lg font-semibold text-green-800">Fetched Post:</h3>
            {data && (
                <div>
                    <p className="font-bold">{data.title}</p>
                    <p className="text-sm text-gray-700">{data.body}</p>
                </div>
            )}
        </div>
    );
};

export default PostFetcher;

interface Todo {
    id: number;
    text: string;
    completed: boolean;
}

const TodoList: React.FC = () => {
    // State is an array of Todo objects
    const [todos, setTodos] = useState<Todo[]>([]);
    const [newTodoText, setNewTodoText] = useState<string>('');

    const addTodo = () => {
        if (newTodoText.trim() === '') return;
        const newTodo: Todo = {
            id: Date.now(),
            text: newTodoText,
            completed: false,
        };
        setTodos([...todos, newTodo]);
        setNewTodoText('');
    };

    return (
        <div>
            <input type="text" value={newTodoText} onChange={(e) => setNewTodoText(e.target.value)} />
            <button onClick={addTodo}>Add Todo</button>
            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>{todo.text}</li>
                ))}
            </ul>
        </div>
    );
};