import { Problem } from '../components/Problem.jsx'
import { useUser } from '../hooks.jsx'

export const HomePage = () => {
    const { username } = useUser()

    const logout = async () => {
        await fetch(`/api/logout`, {
            method: 'POST',
        })

        location.reload()
    }

    const problems = Array.from({ length: 20 }, (_, i) => ({
        id: i + 1,
        content:
            `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto porro commodi cumque ratione sequi reiciendis corrupti a eius praesentium.\n`.repeat(
                ((i + 2) % 4) + 1
            ),
    }))

    return (
        <main class="home">
            <div class="logo">PHC / Problemi</div>
            <div class="subtitle">
                {username ? (
                    <>
                        Logged in as {username} (
                        <span class="link" onClick={() => logout()}>
                            Logout
                        </span>
                        )
                    </>
                ) : (
                    <a href="/login">Login</a>
                )}
            </div>
            <div class="board">
                {problems.map(p => (
                    <Problem {...p} />
                ))}
            </div>
        </main>
    )
}