"use client";

import { PLATFORM_APPS } from "@/lib/apps-catalog";
import { AppTile, SectionTitle } from "@/components/ui";

export function AppStoreGrid() {
  const availableApps = PLATFORM_APPS.filter((app) => app.status === "available");
  const comingSoonApps = PLATFORM_APPS.filter((app) => app.status === "coming_soon");

  return (
    <div className="space-y-12">
      <section>
        <SectionTitle
          title="اپلیکیشن‌های فعال"
          subtitle={`${availableApps.length} سرویس آماده استفاده — روی هر کدام کلیک کنید`}
        />
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 md:grid-cols-4 lg:grid-cols-5">
          {availableApps.map((app) => (
            <AppTile key={app.id} app={app} />
          ))}
        </div>
      </section>

      <section>
        <SectionTitle
          title="به‌زودی"
          subtitle="سرویس‌هایی که در حال توسعه هستند"
        />
        <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 sm:gap-3 md:grid-cols-5 lg:grid-cols-6">
          {comingSoonApps.map((app) => (
            <AppTile key={app.id} app={app} variant="compact" />
          ))}
        </div>
      </section>
    </div>
  );
}