import Link from "next/link";

const ids = [
  "accept",
  "eligibility",
  "auctions",
  "listings",
  "vet",
  "transport",
  "fees",
  "prohibited",
  "ip",
  "notices",
  "warranty",
  "liability",
  "indemnity",
  "suspension",
  "law",
  "changes",
  "contact",
];

export default function TOC() {
  return (
    <aside className="space-y-3 top-24 lg:sticky h-max">
      <div className="bg-white border rounded-2xl p-5">
        <div className="text-[color:var(--g1)] font-extrabold mb-2">
          محتويات الصفحة
        </div>
        <ul className="space-y-1 text-sm">
          {ids.map((id) => (
            <li key={id}>
              <Link
                className="text-[color:var(--g1)] hover:underline"
                href={`#${id}`}
              >
                {titleMap[id] ?? id}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}

const titleMap: Record<string, string> = {
  accept: "الموافقة على الشروط",
  eligibility: "الأهلية وإنشاء الحساب",
  auctions: "شروط المزادات",
  listings: "التزامات البائع في العروض",
  vet: "الفحص البيطري",
  transport: "خدمة النقل",
  fees: "الرسوم والدفع",
  prohibited: "سلوك محظور",
  ip: "الملكية الفكرية",
  notices: "التنبيهات والمراسلات",
  warranty: "إخلاء المسؤولية",
  liability: "حدود المسؤولية",
  indemnity: "التعويض",
  suspension: "التعليق وإنهاء الحساب",
  law: "القانون والاختصاص",
  changes: "تعديل الشروط",
  contact: "اتصل بنا",
};