Login to Org using Next.js Login Link

"use client";

import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { LoginLink } from "@kinde-oss/kinde-auth-nextjs/components";
import { Course } from "../layout";

interface ComboBoxProps {
  currentCourse: Course;
  allCourses: Course[];
}

export function ComboBox(props: ComboBoxProps) {
  const { currentCourse, allCourses } = props;
  const [open, setOpen] = React.useState(false);
  const [orgCode, setOrgCode] = React.useState("");
  const [courseName, setCourseName] = React.useState(currentCourse.courseName);

  console.log("Current course:", currentCourse);
  console.log("All courses:", allCourses);

  return (
    <>{allCourses.map((course) => (
              <LoginLink key={course.orgCode} orgCode={course.orgCode}>
                <CommandItem
                  value={course.orgCode}
                  onSelect={(currentOrgCode) => {
                    setOrgCode(
                      currentOrgCode === orgCode ? "" : currentOrgCode
                    );
                    setCourseName(course.courseName);
                    setOpen(false);
                  }}
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      orgCode === course.orgCode ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {course.courseName}
                </CommandItem>
              </LoginLink>
            ))}
            </>
              );
}