app/(audiences)/for-teachers/page.tsx

"use client";

// React and core imports
import * as React from "react";
import { Suspense } from "react";

// Component imports
import ChatBotGrid from "@/app/(audiences)/components/chat-bot-grid";
import { SubjectFilter } from "@/app/(audiences)/components/subject-filter";
import SearchBar from "@/app/(audiences)/components/search-bar";
import ChatBotGridSkeleton from "@/app/(audiences)/components/chat-bot-grid-skeleton";

// Data fetching utilities
import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";

/**
 * ForTeachersPage Component
 *
 * Main page component for the teachers' section that displays a searchable and filterable
 * grid of AI chatbots specifically curated for educational purposes.
 *
 * Features:
 * - Category and subject filtering
 * - Search functionality
 * - Responsive grid layout with loading skeleton
 */
export default function ForTeachersPage() {
  // State management for filters and search
  const [selectedCategories, setSelectedCategories] = React.useState<string[]>(
    [],
  );
  const [selectedSubjects, setSelectedSubjects] = React.useState<string[]>([]);
  const [searchQuery, setSearchQuery] = React.useState<string>("");

  // Handler for search input updates
  const handleSearch = (query: string) => {
    setSearchQuery(query);
  };

  return (
    <main className="min-h-screen bg-background-primary">
      {/* Hero Section - Main title and description in Chinese */}
      <section className="mb-12 pt-16 text-center">
        <h1 className="mb-4 text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          PlayGO for Teachers
        </h1>
        <p className="mx-auto max-w-2xl text-lg text-text-secondary">
          探索適合教學的 AI 聊天機器人，提升教學效率！
        </p>
      </section>

      {/* Interactive controls section */}
      <div className="container mx-auto px-4">
        {/* Search functionality */}
        <div className="mb-8">
          <SearchBar onSearch={handleSearch} />
        </div>

        {/* Category and subject filtering controls */}
        <div className="mb-12">
          <SubjectFilter
            selectedCategories={selectedCategories}
            setSelectedCategories={setSelectedCategories}
            selectedSubjects={selectedSubjects}
            setSelectedSubjects={setSelectedSubjects}
          />
        </div>

        {/* Chatbot grid with loading fallback */}
        <Suspense fallback={<ChatBotGridSkeleton />}>
          <ChatBotGrid
            selectedCategories={selectedCategories}
            selectedSubjects={selectedSubjects}
            searchQuery={searchQuery}
            getPopularBots={getPopularBots}
            getTrendingBots={getTrendingBots}
            getAllBots={getAllBots}
          />
        </Suspense>
      </div>
    </main>
  );
}