return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-xl font-bold">Social App</h1>
          {isLoggedIn ? (
            <div className="flex items-center space-x-4">
              <span className="flex items-center">
                <User className="h-4 w-4 mr-1" />
                {currentUser?.username}
              </span>
              <Button variant="outline" size="sm" onClick={handleLogout}>
                Logout
              </Button>
            </div>
          ) : (
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowRegister(!showRegister)}
            >
              {showRegister ? 'Login' : 'Register'}
            </Button>
          )}
        </div>
      </header>

      <main className="container mx-auto px-4 py-8">
        {!isLoggedIn ? (
          <div className="max-w-md mx-auto">
            <Card>
              <CardHeader>
                <CardTitle>
                  {showRegister ? 'Create an Account' : 'Welcome Back'}
                </CardTitle>
              </CardHeader>
              <CardContent>
                {showRegister ? (
                  <form onSubmit={handleRegister} className="space-y-4">
                    <div>
                      <Label htmlFor="username">Username</Label>
                      <Input
                        id="username"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="password">Password</Label>
                      <Input
                        id="password"
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                      />
                    </div>
                    <Button type="submit" className="w-full">
                      Register
                    </Button>
                  </form>
                ) : (
                  <form onSubmit={handleLogin} className="space-y-4">
                    <div>
                      <Label htmlFor="login-email">Email</Label>
                      <Input
                        id="login-email"
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="login-password">Password</Label>
                      <Input
                        id="login-password"
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                      />
                    </div>
                    <Button type="submit" className="w-full">
                      Login
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>
          </div>
        ) : (
          <div className="max-w-2xl mx-auto space-y-6">
            {/* Create Post */}
            <Card>
              <CardHeader>
                <CardTitle>Create Post</CardTitle>
              </CardHeader>
              <CardContent>
                <form onSubmit={handlePostSubmit} className="space-y-4">
                  <div>
                    <Label htmlFor="post-text">What's on your mind?</Label>
                    <Input
                      id="post-text"
                      value={postText}
                      onChange={(e) => setPostText(e.target.value)}
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="post-image">Image (optional)</Label>
                    <input
                      id="post-image"
                      type="file"
                      accept="image/*"
                      onChange={handleImageChange}
                      className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
                    />
                    {postImage && (
                      <div className="mt-2">
                        <img
                          src={postImage}
                          alt="Preview"
                          className="h-32 object-cover rounded"
                        />
                      </div>
                    )}
                  </div>
                  <Button type="submit" className="w-full">
                    <Plus className="h-4 w-4 mr-2" />
                    Post
                  </Button>
                </form>
              </CardContent>
            </Card>
            
            {/* Posts Feed */}
            <div className="space-y-4">
              {posts.length === 0 ? (
                <Card>
                  <CardContent className="py-8 text-center text-gray-500">
                    No posts yet. Be the first to share something!
                  </CardContent>
                </Card>
              ) : (
                posts.map((post) => (
                  <Card key={post.id}>
                    <CardHeader>
                      <div className="flex items-center space-x-2">
                        <div className="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8" />
                        <span className="font-medium">{post.username}</span>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <p>{post.text}</p>
                      {post.image && (
                        <img
                          src={post.image}
                          alt="Post"
                          className="w-full h-64 object-cover rounded"
                        />
                      )}
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </div>
        )}
      </main>
    </div>
  );
}