import { usePage } from "@inertiajs/react";
import Shell from "../components/Shell";
import {
    CourseCard,
    Empty,
    Heading,
    Pagination,
    Panel,
} from "../components/ui";
import type { Course, Paginated, Shared } from "../types";
export default function Courses({
    courses,
    view,
}: {
    courses: Paginated<Course>;
    view: string;
}) {
    const { auth } = usePage<Shared>().props;
    const self = auth?.user_type === "student";
    const materials = false;
    const title = materials
        ? "Learning materials"
        : ["gradebooks", "final-grades"].includes(view)
          ? "Final grades"
          : self
            ? "My subjects"
            : "Subject Classes";
    return (
        <Shell title={title}>
            <Heading
                title={title}
                description={
                    self
                        ? "View your enrolled subjects, class details and official final grades."
                        : "View actual class rosters, schedules and manually entered final grades."
                }
            />
            {courses.data.length ? (
                <div className="card-grid">
                    {courses.data.map((c) => (
                        <CourseCard
                            key={c.id}
                            course={c}
                            student={self}
                            materials={materials}
                        />
                    ))}
                </div>
            ) : (
                <Panel>
                    <Empty title="No classes yet">
                        Your assigned or enrolled classes will appear here.
                    </Empty>
                </Panel>
            )}
            <Pagination page={courses} />
        </Shell>
    );
}