import { Show, createSignal } from "solid-js";
import { Search } from "../certs/Search";
import { Person } from "../types/Person";

export function OnlineClassroom() {
    const [person, setPerson] = createSignal<Person | null>(null);

    return (
        <div class="grid grid-cols-[16rem_25rem_1fr]">
            <Search setPerson={setPerson} />
            <div>
                <ClassroomConection />
                <Show when={person()}>
                    <ClassroomUsers person={person()!} />
                </Show>
            </div>
        </div>
    );
}

function ClassroomConection() {
    return (
        <div>
            Connection status
        </div>
    );
}

function ClassroomUsers(props: {person: Person}) {
    return (
        <div>
            <h2 class="text-xl">
                Usuarios para {props.person.person_names}:
            </h2>
        </div>
    );
}