"use client";

import { Suspense } from "react";
import { AppShell } from "@/components/app/AppShell";
import { RequireAcademicAdmin } from "@/components/auth/RequirePermission";
import { AttendanceRecords } from "@/components/academic/attendance/AttendanceRecords";
import { PageContentSkeleton } from "@/components/ui/Skeleton";

export default function AttendanceRecordsPage() {
  return (
    <RequireAcademicAdmin>
      <AppShell
        title="ریز داده‌های حضور و غیاب"
        subtitle="فهرست تفصیلی اعداد گزارش · تفکیک کلاس‌های حضوری و مجازی"
      >
        <Suspense fallback={<PageContentSkeleton rows={8} />}>
          <AttendanceRecords />
        </Suspense>
      </AppShell>
    </RequireAcademicAdmin>
  );
}