import Link from "next/link";
import PageShell from "@/components/page-shell";
import { GuaGrid } from "@/components/learn/gua-grid";
import { ZenCard } from "@/components/ui/zen-card";
import {
  getGuaName,
  guaNumFromMark,
  listGuaMarks,
} from "@/lib/content/zhouyi";

export default async function LearnOtherPage() {
  const guaMarks = await listGuaMarks("simplified");
  const items = guaMarks.map((mark) => ({
    num: guaNumFromMark(mark),
    name: getGuaName(mark),
    href: `/learn/other/${guaNumFromMark(mark)}`,
  }));

  return (
    <PageShell className="max-w-6xl px-4 py-8">
      <div className="mb-8 text-center">
        <h1 className="text-2xl font-bold tracking-wide">易经学习</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          简体图文版 · 六十四卦详览
        </p>
      </div>

      <div className="mb-8 grid gap-4 sm:grid-cols-2">
        <Link href="/learn" className="block">
          <ZenCard
            title="繁体精简版"
            subtitle="原文精要"
            className="h-full transition-colors hover:border-primary/30"
          >
            <p className="text-sm text-muted-foreground">
              精简版卦辞，适合速读。
            </p>
            <span className="inline-block text-xs text-primary">← 返回</span>
          </ZenCard>
        </Link>
        <ZenCard
          title="简体图文版"
          subtitle="当前浏览"
          className="ring-1 ring-primary/20"
        >
          <p className="text-sm text-muted-foreground">
            含互卦、错卦、综卦及卦象图。
          </p>
          <span className="inline-block text-xs text-primary">已选中</span>
        </ZenCard>
      </div>

      <GuaGrid items={items} />
    </PageShell>
  );
}