import type { ReactNode } from "react";
import Link from "next/link";

import { BlogThumb } from "@/components/blog/blog-thumb";
import { BlogPre } from "@/components/blog/_components/blog-pre";
import type { Illust, Tint } from "@/lib/blog/types";
import styles from "./blog.module.css";

/** Gradient-iconed callout box (design `.callout`). */
function Callout({
  title,
  href,
  cta,
  children,
}: {
  title: string;
  href?: string;
  cta?: string;
  children: ReactNode;
}) {
  return (
    <div className={styles.callout}>
      <div className={styles.coIc} aria-hidden="true">
        <svg
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4" />
          <circle cx="12" cy="12" r="3" />
        </svg>
      </div>
      <div>
        <h4>{title}</h4>
        {children}
        {href && cta ? (
          <Link href={href} className={`${styles.btn} ${styles.btnPrimary}`}>
            {cta}
            <svg
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.4"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        ) : null}
      </div>
    </div>
  );
}

/** Single stat used inside <StatStrip> (string props — MDX-safe). */
function Stat({ v, l }: { v: string; l: string }) {
  return (
    <div className={styles.st}>
      <div className={`${styles.stV} text-gradient-brand`}>{v}</div>
      <div className={styles.stL}>{l}</div>
    </div>
  );
}

/** Inline stat strip (design `.stat-strip`). Takes <Stat> children. */
function StatStrip({ children }: { children: ReactNode }) {
  return <div className={styles.statStrip}>{children}</div>;
}

/** Illustrated figure with caption (design `figure > .thumb`). */
function Figure({
  illust,
  tint = "blue",
  caption,
}: {
  illust: Illust;
  tint?: Tint;
  caption?: string;
}) {
  return (
    <figure className={styles.figure}>
      <BlogThumb illust={illust} tint={tint} className={styles.figThumb} />
      {caption ? (
        <figcaption className={styles.figcaption}>{caption}</figcaption>
      ) : null}
    </figure>
  );
}

/** Components available inside blog MDX bodies + element overrides. */
export const blogMdxComponents = {
  pre: BlogPre as never,
  Callout,
  Stat,
  StatStrip,
  Figure,
};