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

type ModuleRow = {
  keyName: string;
  name: string;
  dependency: string;
  status: string;
};

type Props = {
  modules: ModuleRow[];
  cards: string[];
};

export default function Modules({ modules, cards }: Props) {
  const rows = modules.map((module) => [module.keyName, module.name, module.dependency, module.status]);

  return (
    <AppLayout title="کاتالوگ ماژول‌ها">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>فروش امکانات مدرسه به صورت ماژولی</h2>
            <p>Super Admin اینجا مشخص می‌کند هر قابلیت چه dependency، permission، limit و قیمت پایه‌ای دارد.</p>
          </div>
          <button className="btn btn-primary" type="button"><i className="bi bi-plus-lg" /> ثبت ماژول</button>
        </section>
        <section className="card-grid">
          {cards.map((item) => (
            <article className="panel-card" key={item}>
              <span className="icon-badge"><i className="bi bi-box-seam" /></span>
              <h3>{item}</h3>
              <p>در زمان فروش license بررسی می‌شود تا چیزی که مدرسه نخریده اصلا در UI دیده نشود.</p>
            </article>
          ))}
        </section>
        {rows.length > 0
          ? <DataTable columns={['کد', 'نام', 'پیش‌نیاز', 'وضعیت']} rows={rows} />
          : <section className="panel-card"><h2>ماژولی در دیتابیس نیست</h2><p>ابتدا seed.sql را import کن تا کاتالوگ ماژول‌ها ساخته شود.</p></section>}
      </div>
    </AppLayout>
  );
}
