"use client"; import Link from "next/link"; import { ReactNode } from "react"; import { TYPE_COLORS, TYPE_LABELS, getArticleBySlug, getRelatedArticles, } from "@/data/resources-articles"; import { localizedPath } from "@/lib/localized-path"; type Props = { slug: string; lang: "en" | "ar"; }; const TYPE_ICONS: Record = { guide: ( ), playbook: ( ), comparison: ( ), template: ( ), }; const UI = { en: { back: "All resources", tldr: "TL;DR", related: "Related articles", readMore: "Read article", ctaTitle: "Want help implementing this?", ctaSubtitle: "Tell us about your channels, team size, and goals. We will map the right SkyLight setup for your business.", ctaButton: "Talk to Sales", discuss: "Discuss this solution with us", byline: "By the SkyLight Chat product team", updated: "Last updated July 19, 2026", comparisonNote: "Editorial note: this comparison is general guidance based on publicly available product information and may change. Verify current features, limits, and pricing with each vendor before deciding.", }, ar: { back: "كل الموارد", tldr: "الخلاصة السريعة", related: "مقالات ذات صلة", readMore: "اقرأ المقال", ctaTitle: "تحتاج مساعدة في تطبيق هذا؟", ctaSubtitle: "أخبرنا عن قنواتك وحجم فريقك وأهدافك. سنرسم لك إعداد سكاي لايت المناسب لعملك.", ctaButton: "تحدث مع المبيعات", discuss: "ناقش هذا الحل معنا", byline: "إعداد فريق المنتج في سكاي لايت شات", updated: "آخر تحديث: 19 يوليو 2026", comparisonNote: "ملاحظة تحريرية: هذه المقارنة إرشاد عام مبني على معلومات المنتجات المتاحة علناً وقد تتغير. تحقق من المزايا والقيود والأسعار الحالية مع كل مزود قبل اتخاذ القرار.", }, }; function parseTextWithLinks(text: string, langLink: (path: string) => string) { const parts: (string | React.ReactNode)[] = []; const regex = /\[([^\]]+)\]\(([^)]+)\)/g; let lastIndex = 0; let match; while ((match = regex.exec(text)) !== null) { const plainText = text.substring(lastIndex, match.index); if (plainText) { parts.push(plainText); } const label = match[1]; const url = match[2]; parts.push( {label} ); lastIndex = regex.lastIndex; } const remainingText = text.substring(lastIndex); if (remainingText) { parts.push(remainingText); } return parts.length > 0 ? parts : text; } export default function ResourceArticleArea({ slug, lang }: Props) { const ui = UI[lang]; const isRtl = lang === "ar"; const langLink = (path: string) => localizedPath(path, lang); const article = getArticleBySlug(slug, lang); const related = getRelatedArticles(slug, lang); if (!article) return null; const typeColor = TYPE_COLORS[article.type]; const backChevron = isRtl ? ( ) : ( ); return (
{TYPE_ICONS[article.type]} {TYPE_LABELS[lang][article.type]}
· {article.readTime}

{ui.byline} ·

{article.title}

{parseTextWithLinks(article.description, langLink)}

{article.type === "comparison" && ( )}

{ui.tldr}

{parseTextWithLinks(article.tldr ?? article.description, langLink)}

{article.sections.map((section, idx) => (
{section.heading &&

{section.heading}

} {section.text &&

{parseTextWithLinks(section.text, langLink)}

} {section.list && (
    {section.list.map((item, lIdx) => (
  • {parseTextWithLinks(item, langLink)}
    • ))}
)}
))}
{ui.discuss}
{related.length > 0 && (

{ui.related}

{related.map((item) => (
{TYPE_ICONS[item.type]} {TYPE_LABELS[lang][item.type]}

{item.title}

{item.description}

{ui.readMore} {isRtl ? "←" : "→"}
))}
)}

{ui.ctaTitle}

{ui.ctaSubtitle}

{ui.ctaButton}
); }