import { AppLayout } from '@/Components/Layout/AppLayout';
import { UsageChart } from '@/Components/Charts/UsageChart';

export default function SchoolUsage() {
  return (
    <AppLayout title="Usage مدرسه">
      <div className="page-stack">
        <section className="dashboard-grid">
          <article className="metric-card"><span>کاربران فعال</span><strong>۹۸۲</strong></article>
          <article className="metric-card"><span>نشست‌های امروز</span><strong>۱,۷۴۰</strong></article>
          <article className="metric-card"><span>میانگین آنلاین بودن</span><strong>۱۸ دقیقه</strong></article>
        </section>
        <section className="panel-card">
          <h2>استفاده روزانه</h2>
          <UsageChart values={[35, 60, 75, 62, 90, 80, 96]} />
        </section>
      </div>
    </AppLayout>
  );
}