import Image from "next/image";
import { getTranslations } from "next-intl/server";
import Link from "@/components/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
import { formatDate } from "@/lib/format-date";
import { getNewsList } from "@/lib/services/news-list";

export const metadata = { title: "News" };

export default async function NewsPage() {
	const t = await getTranslations("pages.news");

	const articles = await getNewsList(30);

	return (
		<main style={{ display: "grid", gap: "1.5rem" }}>
			<ContentCard icon="📰" title={t("title")} subtitle={t("subtitle")} />

			<ContentCard padded={articles.length === 0}>
				{articles.length === 0 ? (
					<EmptyState icon="📰">{t("noArticles")}</EmptyState>
				) : (
					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
						{articles.map((a) => (
							<Link
								key={a.slug}
								href={`/news/${a.slug}`}
								className="card hover"
								style={{
									display: "flex",
									flexDirection: "column",
									textDecoration: "none",
									padding: 0,
									overflow: "hidden",
								}}
							>
								{a.image ? (
									<div
										style={{
											position: "relative",
											width: "100%",
											aspectRatio: "16/9",
										}}
									>
										<Image
											src={a.image}
											alt=""
											fill
											sizes="(max-width: 1024px) 50vw, 300px"
											style={{ objectFit: "cover" }}
										/>
									</div>
								) : (
									<div
										style={{
											width: "100%",
											aspectRatio: "16/9",
											backgroundColor:
												"color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar))",
										}}
									/>
								)}
								<div
									style={{
										padding: "1rem 1.1rem",
										flex: 1,
										display: "flex",
										flexDirection: "column",
									}}
								>
									<h3
										style={{
											margin: 0,
											fontSize: "1.05rem",
											color:
												"var(--color-navbar-text-readable, var(--color-navbar-text))",
											lineHeight: 1.4,
										}}
									>
										{a.title}
									</h3>
									<p
										className="muted"
										style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}
									>
										{formatDate(a.createdAt, "date", "")}
									</p>
									<p
										style={{
											margin: 0,
											color:
												"var(--color-navbar-text-readable, var(--color-navbar-text))",
											fontSize: "0.88rem",
											lineHeight: 1.55,
										}}
									>
										{excerpt(a.shortStory, 150)}
									</p>
								</div>
							</Link>
						))}
					</div>
				)}
			</ContentCard>
		</main>
	);
}