import { Chip } from "../../components/Chip";

export function RegisterPresets() {
    let datePicker: HTMLInputElement | undefined;

    return (
        <>
            <div class="h-52">
                <p>Las fechas se colocan automáticamente según la duración del curso.</p>
                <br />
                <div class="flex flex-wrap gap-2">
                    <Chip text="2 Matpel" />
                    <Chip text="3 Matpel" />
                    <Chip text="4 Escolta" />
                    <Chip text="MD, 2 Matpel" />
                    <Chip text="3 4x4" />
                    <Chip text="2 4x4" />
                </div>
            </div>
            <div class="my-4">
                <div class="relative">
                    <input
                        ref={datePicker}
                        id="create-date"
                        class="bg-c-surface text-c-on-surface border border-c-outline rounded-lg p-2 font-mono"
                        type="date"
                    />
                    <label for="create-date" class="absolute -top-2 left-2 text-xs bg-c-surface px-1">Fecha</label>
                </div>
            </div>
            <input
                class="bg-c-primary text-c-on-primary px-4 py-2 rounded-full cursor-pointer
                                    disabled:opacity-50 disabled:cursor-not-allowed"
                type="submit"
                value="Agregar"
                // disabled={props.personId === null}
            />
        </>
    );
}