// Basic fetch pattern
async function loadUsers() {
  const res = await fetch('/api/users');
  const data = (await res.json()) as { users: Array<{ id: number; name: string }> };
  return data.users;
}

// Usage in component
const users = await loadUsers();

// Access public environment variables
declare const env: { MANIC_PUBLIC_API_URL?: string };

const apiUrl = env.MANIC_PUBLIC_API_URL || 'https://api.example.com';
console.log('API:', apiUrl);

// Client-side only code
if (typeof globalThis !== 'undefined' && 'localStorage' in globalThis) {
  // This code only runs in the browser
  localStorage.setItem('key', 'value');
  const item = localStorage.getItem('key');
  console.log(item);
}

// API route type export
interface UserResponse {
  users: Array<{ id: number; name: string }>;
}

// This would be exported from app/api/users/index.ts
type AppType = {
  users: {
    $get: () => Promise<UserResponse>;
  };
};

// Client-side API call
interface User {
  id: number;
  name: string;
}

interface UserResponse {
  users: User[];
}

async function fetchUsers(): Promise<User[]> {
  const res = await fetch('/api/users');
  const data = (await res.json()) as UserResponse;
  return data.users;
}

// Usage
const users = await fetchUsers();
users.forEach(u => console.log(u.name));

// Link component automatically prefetches
interface LinkProps {
  href: string;
  children: string;
  onMouseEnter?: () => void;
}

// Usage in your app:
// <Link href="/about">About</Link> 
// Automatically prefetches /about route on hover
declare function Link(props: LinkProps): any;

// POST request
async function createUser(email: string, name: string) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, name }),
  });
  
  if (!res.ok) throw new Error('Failed to create user');
  return res.json();
}

// GET with query parameters
async function searchUsers(query: string) {
  const params = new URLSearchParams({ q: query });
  const res = await fetch(`/api/users/search?${params}`);
  return res.json();
}

// DELETE request
async function deleteUser(id: number) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  return res.ok;
}

// Error handling pattern
interface ApiError {
  error: string;
  code?: string;
}

async function fetchData(url: string) {
  try {
    const res = await fetch(url);
    
    if (!res.ok) {
      const error = (await res.json()) as ApiError;
      throw new Error(error.error || 'Request failed');
    }
    
    return res.json();
  } catch (err) {
    console.error('Fetch error:', err);
    throw err;
  }
}