import { AppLayout } from '@/Components/Layout/AppLayout';
import { DataTable } from '@/Components/Tables/DataTable';

type TeacherClass = {
  time: string;
  classroom: string;
  subject: string;
  action: string;
};

type Props = {
  classes: TeacherClass[];
};

export default function MyClasses({ classes }: Props) {
  const rows = classes.map((item) => [item.time, item.classroom, item.subject, item.action]);

  return (
    <AppLayout title="کلاس‌های من">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>برنامه امروز معلم</h2>
            <p>معلم فقط کلاس‌ها و ابزارهایی را می‌بیند که برای او assign شده‌اند.</p>
          </div>
          <a className="btn btn-primary" href="/school/attendance">ثبت حضور و غیاب</a>
        </section>
        {rows.length > 0
          ? <DataTable columns={['ساعت', 'کلاس', 'درس', 'اقدام']} rows={rows} />
          : <section className="panel-card"><h2>کلاسی برای این معلم ثبت نشده</h2><p>بعد از assign کردن معلم به برنامه هفتگی، کلاس‌ها از دیتابیس اینجا می‌آید.</p></section>}
      </div>
    </AppLayout>
  );
}
