import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { Link } from "@tanstack/react-router";
import { ArrowLeft, Calendar, Clock } from "lucide-react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { j as Route } from "./router-D4ixsMHb.js";
import "@tanstack/react-query";
import "react";
import "@radix-ui/react-slot";
import "class-variance-authority";
import "clsx";
import "tailwind-merge";
import "cmdk";
import "@radix-ui/react-dialog";
import "@supabase/supabase-js";
import "sonner";
function BlogPost() {
  const {
    post,
    related
  } = Route.useLoaderData();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("div", { className: "container mx-auto px-4 pt-6 md:px-6", children: /* @__PURE__ */ jsxs(Link, { to: "/blog", className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-brand-bright", children: [
      /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
      " Back to blog"
    ] }) }),
    /* @__PURE__ */ jsxs("article", { className: "container mx-auto max-w-3xl px-4 py-8 md:px-6 md:py-12", children: [
      /* @__PURE__ */ jsx("h1", { className: "font-display text-3xl font-extrabold leading-tight text-foreground md:text-5xl", children: post.title }),
      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-4 text-sm text-muted-foreground", children: [
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
          /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
          " ",
          new Date(post.date).toLocaleDateString()
        ] }),
        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
          /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
          " ",
          post.readMin,
          " min read"
        ] })
      ] }),
      /* @__PURE__ */ jsx("img", { src: post.cover, alt: post.title, width: 1280, height: 768, className: "mt-8 aspect-[16/9] w-full rounded object-cover shadow-[var(--shadow-elevated)]" }),
      /* @__PURE__ */ jsx("div", { className: "prose prose-lg mt-10 max-w-none prose-headings:font-display prose-headings:text-foreground prose-p:text-foreground/85 prose-a:text-brand-bright prose-strong:text-foreground prose-img:rounded-sm", children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: post.body }) })
    ] }),
    /* @__PURE__ */ jsx("section", { className: "bg-surface py-16", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 md:px-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground md:text-3xl", children: "More from the blog" }),
      /* @__PURE__ */ jsx("div", { className: "mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: related.map((p) => /* @__PURE__ */ jsxs(Link, { to: "/blog/$slug", params: {
        slug: p.slug
      }, className: "group overflow-hidden rounded border border-border bg-card shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:shadow-[var(--shadow-elevated)]", children: [
        /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] overflow-hidden", children: /* @__PURE__ */ jsx("img", { src: p.cover, alt: p.title, loading: "lazy", width: 1024, height: 768, className: "h-full w-full object-cover transition duration-500 group-hover:scale-105" }) }),
        /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
          /* @__PURE__ */ jsx("h3", { className: "line-clamp-2 text-base font-bold text-foreground transition group-hover:text-brand-bright", children: p.title }),
          /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-sm text-muted-foreground", children: p.excerpt })
        ] })
      ] }, p.slug)) })
    ] }) })
  ] });
}
export {
  BlogPost as component
};
