import Link from "next/link";
import "./blogs.css";
import type { BlogDetail as BlogDetailPost } from "@/app/lib/blogs";
import { formatBlogDate } from "@/app/lib/blogs";
import { sanitizeCmsHtml } from "@/app/lib/cms-html";
import { BlogCoverImage } from "./blog-cover-image";
import { BlogContent } from "./blog-content";

function BackArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden style={{ transform: "rotate(180deg)" }}>
      <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function BlogDetail({ post }: { post: BlogDetailPost }) {
  const dateLabel = formatBlogDate(post.date_added);
  const kind = post.f_type === "B" ? "Blog" : "Article";

  return (
    <section className="wwd-section blog-detail-section">
      <div className="wwd-inner blog-detail-inner">
        <Link href="/blogs" data-oxy-href="/blogs" className="blog-back-link">
          <BackArrowIcon />
          Back to Insights
        </Link>
        <p className="blog-detail-meta">
          {kind}
          {dateLabel ? ` · ${dateLabel}` : ""}
        </p>
        <h1 className="wwd-headline blog-detail-title">{post.title}</h1>
        {post.categories.length > 0 ? (
          <div className="blog-detail-tags">
            {post.categories.map((category) => (
              <span key={category.id} className="blog-card-tag">
                {category.name}
              </span>
            ))}
          </div>
        ) : null}
        {post.image ? <BlogCoverImage src={post.image} /> : null}
        <BlogContent html={sanitizeCmsHtml(post.content)} />
      </div>
    </section>
  );
}