import reflex as rx
from ..state.auth import AuthState

def login_page():
    return rx.center(
        rx.card(
            rx.vstack(
                rx.heading("Login", size="7", margin_bottom="4"),
                
                rx.text("Username", size="2", weight="bold"),
                rx.input(value=AuthState.username, on_change=AuthState.set_username, width="100%"),
                
                rx.text("Password", size="2", weight="bold"),
                rx.input(type="password", value=AuthState.password, on_change=AuthState.set_password, width="100%"),
                
                rx.button("Sign In", size="3", width="100%", on_click=AuthState.check_login, margin_top="4"),
                
                padding="6",
                spacing="3",
                align_items="start"
            ),
            width="400px",
        ),
        height="100vh",
        bg="var(--gray-1)"
    )