import { useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import type { GetServerSideProps } from "next";
import i18nConfig from "../../../../next-i18next.config";
import { ChevronLeft, Maximize, Share2 } from "lucide-react";
import { type ExpatStory } from "@/lib/expatContent";
import { getExpatStories } from "@/lib/webflowEvents";
import { resolveVideoEmbed } from "@/lib/videoEmbed";
type Props = { story: ExpatStory; moreStories: ExpatStory[] };
// Joins whichever of author/location are actually present with " · ".
function byline(author?: string, location?: string): string {
return [author, location].filter(Boolean).join(" · ");
}
export default function ExpatStoryDetailPage({ story, moreStories }: Props) {
const router = useRouter();
const { t, i18n } = useTranslation("expat");
const lang = i18n.language || router.locale || "en";
const isEn = lang === "en";
const [copied, setCopied] = useState(false);
const resolvedVideo = story.videoUrl
? resolveVideoEmbed(story.videoUrl)
: null;
const title = isEn ? story.title_en : story.title_mn;
const body = isEn ? story.body_en : story.body_mn;
const quote = isEn ? story.quote_en : story.quote_mn;
const authorLine = byline(
story.author,
isEn ? story.location_en : story.location_mn,
);
const onShare = async () => {
const url =
typeof window !== "undefined"
? window.location.href
: `https://send.mn/expat/stories/${story.slug}`;
try {
if (navigator.share) {
await navigator.share({ title, url });
return;
}
throw new Error("no-share-api");
} catch {
try {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
/* no-op */
}
}
};
return (
{`${title} | SendMN`}
{resolvedVideo ? (
// Locked to a real 16:9 box whose width is capped to whatever fits
// the fixed hero height at each breakpoint (e.g. 280px tall -> at
// most 498px wide), so the video is fully contained without ever
// exceeding the hero's bounds, centered within any extra space.