import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useAuth } from "@/hooks/useAuth";
import { Search, Settings } from "lucide-react";
import MainContent from "@/components/MainContent";

export default function Home() {
  const { user } = useAuth();

  const handleLogout = () => {
    window.location.href = "/api/logout";
  };

  const handleAdminPage = () => {
    window.location.href = "/admin";
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-6">
              <img 
                src="/attached_assets/logo_black_1759162717640.png" 
                alt="SAPIENS" 
                className="h-6 w-auto"
                data-testid="logo-sapiens"
              />
              <span className="text-sm text-gray-600 font-medium">Nostra</span>
            </div>
            
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input 
                  type="text" 
                  placeholder="Search the website" 
                  className="w-80 pl-10 bg-gray-50 border-gray-200"
                  data-testid="input-search"
                />
              </div>
              
              <Button 
                variant="ghost" 
                size="sm"
                onClick={handleAdminPage}
                data-testid="button-admin"
              >
                관리자 페이지
              </Button>
              
              <Button 
                variant="ghost" 
                size="sm"
                data-testid="button-settings"
              >
                <Settings className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <MainContent />
    </div>
  );
}