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

export default function StudentStats() {
  return (
    <AppLayout title="آمار حضور دانش‌آموز">
      <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={[88, 95, 92, 74, 80, 96]} />
        </section>
      </div>
    </AppLayout>
  );
}
