"use client"

import { useState } from "react"
import { LoginForm } from "./login-form"
import { RegisterForm } from "./register-form"
import { Cpu } from "lucide-react"

export function AuthScreen() {
  const [mode, setMode] = useState<"login" | "register">("login")

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-background p-4">
      <div className="mb-8 flex flex-col items-center">
        <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary shadow-lg">
          <Cpu className="h-8 w-8 text-primary-foreground" />
        </div>
        <h1 className="mt-4 text-2xl font-bold tracking-tight">Elektronikschule</h1>
        <p className="text-muted-foreground">IT-Support-Portal</p>
      </div>

      {mode === "login" ? (
        <LoginForm onSwitchToRegister={() => setMode("register")} />
      ) : (
        <RegisterForm onSwitchToLogin={() => setMode("login")} />
      )}

      <p className="mt-8 text-center text-xs text-muted-foreground">
        Technisches Support-System für das Personal der Elektronikschule
      </p>
    </div>
  )
}