import Link from "next/link";
import PageShell from "@/components/page-shell";
import {
  getGuaName,
  getGuaNumber,
  listGuaMarks,
} from "@/lib/content/zhouyi";

export default async function LearnOtherPage() {
  const guaMarks = await listGuaMarks("simplified");

  return (
    <PageShell className="max-w-3xl px-4 py-8">
      <div className="mb-6">
        <h1 className="text-2xl font-bold">易经学习 · 简体图文版</h1>
        <p className="mt-2 text-muted-foreground">
          含互卦、错卦、综卦及更多注释（部分卦象图片待补全）
        </p>
        <Link
          href="/learn"
          className="mt-2 inline-block text-sm text-primary underline underline-offset-4"
        >
          ← 返回繁体精简版
        </Link>
      </div>
      <div className="overflow-x-auto rounded-lg border">
        <table className="w-full text-sm">
          <thead className="bg-muted/50">
            <tr>
              <th className="px-4 py-2 text-left font-medium">序号</th>
              <th className="px-4 py-2 text-left font-medium">卦名</th>
            </tr>
          </thead>
          <tbody>
            {guaMarks.map((mark) => (
              <tr key={mark} className="border-t">
                <td className="px-4 py-2 font-mono text-muted-foreground">
                  {getGuaNumber(mark)}
                </td>
                <td className="px-4 py-2">
                  <Link
                    href={`/learn/other/${encodeURIComponent(mark)}`}
                    className="text-primary underline-offset-4 hover:underline"
                  >
                    {getGuaName(mark)}
                  </Link>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </PageShell>
  );
}