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

type ScheduleRow = {
  day: string;
  time: string;
  classroom: string;
  subject: string;
  teacher: string;
  room: string;
};

type Props = {
  schedules: ScheduleRow[];
};

export default function ScheduleBuilder({ schedules }: Props) {
  const rows = schedules.map((schedule) => [
    schedule.day,
    schedule.time,
    schedule.classroom,
    schedule.subject,
    schedule.teacher,
    schedule.room,
  ]);

  return (
    <AppLayout title="برنامه هفتگی">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>برنامه کلاس و معلم</h2>
            <p>مدیر یا معاون می‌تواند برنامه را برای کلاس‌ها بسازد؛ معلم فقط برنامه خودش را می‌بیند.</p>
          </div>
          <button className="btn btn-primary" type="button"><i className="bi bi-calendar-plus" /> افزودن زنگ</button>
        </section>
        {rows.length > 0
          ? <DataTable columns={['روز', 'ساعت', 'کلاس', 'درس', 'معلم', 'اتاق']} rows={rows} />
          : <section className="panel-card"><h2>برنامه‌ای ثبت نشده</h2><p>بعد از ثبت زنگ‌ها، برنامه هفتگی واقعی از دیتابیس نمایش داده می‌شود.</p></section>}
      </div>
    </AppLayout>
  );
}
