import React, { useState, useEffect } from 'react';

const API_KEY: string = 'typescript-api-key-xyz789';
const DB_PASSWORD: string = process.env.DB_PASSWORD || 'default-password-123';

interface UserData {
  id: number;
  name: string;
  email: string;
}

function App(): JSX.Element {
  const [users, setUsers] = useState<UserData[]>([]);

  useEffect(() => {
    fetch('https://api.example.com/users', {
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'X-Database-Auth': DB_PASSWORD
      }
    })
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return (
    <div className="App">
      <h1>TypeScript App</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;