import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Search } from "lucide-react";

export default function FakeRoblox() {
  return (
    <div className="min-h-screen bg-gray-100 p-6">
      {/* Header */}
      <header className="flex justify-between items-center bg-white shadow-md p-4 rounded-2xl">
        <h1 className="text-2xl font-bold text-blue-600">FakeBlox</h1>
        <div className="flex items-center gap-2">
          <input
            type="text"
            placeholder="Search games..."
            className="p-2 rounded-lg border border-gray-300"
          />
          <Button className="bg-blue-600 text-white">
            <Search className="h-4 w-4" />
          </Button>
        </div>
        <Button className="bg-green-500 text-white">Sign In</Button>
      </header>

      {/* Main Content */}
      <main className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((game) => (
          <Card key={game} className="hover:shadow-lg transition">
            <CardContent className="p-4">
              <div className="h-32 bg-gray-300 rounded-lg mb-2"></div>
              <h2 className="text-lg font-semibold">Game {game}</h2>
              <p className="text-sm text-gray-500">by User{game}</p>
              <Button className="mt-2 w-full bg-blue-500 text-white">Play</Button>
            </CardContent>
          </Card>
        ))}
      </main>
    </div>
  );
}