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

"use client";

// External dependencies
import * as React from "react";
import { Suspense } from "react";

// Internal 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";
import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";

/**
 * ForStudentsPage Component
 * Main page component for the student-focused section of the application.
 * Provides a searchable and filterable interface for students to discover AI chatbots.
 */
export default function ForStudentsPage() {
  // 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 */}
      <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 Students
        </h1>
        {/* Description in Traditional Chinese: "Explore AI chatbots suitable for learning and improve learning efficiency!" */}
        <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 system */}
        <div className="mb-12">
          <SubjectFilter
            selectedCategories={selectedCategories}
            setSelectedCategories={setSelectedCategories}
            selectedSubjects={selectedSubjects}
            setSelectedSubjects={setSelectedSubjects}
          />
        </div>

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