import { AppLayout } from '@/Components/Layout/AppLayout';
type StoreModule = {
  keyName: string;
  name: string;
  description: string;
  enabled: boolean;
  dependencies: string[];
};

type Props = {
  modules: StoreModule[];
};

export default function ModuleStore({ modules }: Props) {
  return (
    <AppLayout title="فروشگاه ماژول‌ها">
      <div className="page-stack">
        <section className="section-header">
          <div>
            <h2>درخواست فعال‌سازی قابلیت‌ها</h2>
            <p>مالک مدرسه می‌تواند درخواست بدهد؛ تایید، قیمت و فعال‌سازی نهایی فقط با مدیر کل است.</p>
          </div>
          <span className="status-pill info">پرداخت آنلاین بعدا</span>
        </section>
        <section className="card-grid">
          {modules.map((module) => (
            <article className="panel-card" key={module.keyName}>
              <span className="icon-badge"><i className="bi bi-stars" /></span>
              <h3>{module.name}</h3>
              <p>{module.description}</p>
              {module.dependencies.length > 0 ? <p className="mini-note">پیش‌نیاز: {module.dependencies.join('، ')}</p> : null}
              <button className={module.enabled ? 'btn btn-ghost' : 'btn btn-primary'} type="button" disabled={module.enabled}>
                {module.enabled ? 'فعال است' : 'درخواست فعال‌سازی'}
              </button>
            </article>
          ))}
          {modules.length === 0 ? <article className="panel-card"><h3>ماژول قابل فروشی وجود ندارد</h3><p>بعد از import seed.sql، ماژول‌های قابل فروش اینجا نمایش داده می‌شوند.</p></article> : null}
        </section>
      </div>
    </AppLayout>
  );
}