import Link from "next/link";

import type { Locale } from "@/lib/i18n";
import { getCategory, getCategoryName } from "@/lib/blog/categories";
import type { BlogPost } from "@/lib/blog/types";
import { BlogThumb } from "@/components/blog/blog-thumb";
import styles from "./blog.module.css";

export function formatDate(iso: string, lang: Locale, long = false): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return iso;
  return d.toLocaleDateString(lang === "fr" ? "fr-FR" : "en-US", {
    month: "short",
    day: "numeric",
    ...(long ? { year: "numeric" } : {}),
  });
}

/** Standard article card (design `.pcard`). */
export function PostCard({
  post,
  lang,
  badge,
}: {
  post: BlogPost;
  lang: Locale;
  badge?: string;
}) {
  const cat = getCategory(post.category);
  return (
    <Link className={styles.pcard} href={`/${lang}${post.href}`}>
      <BlogThumb
        illust={post.thumb.illust}
        tint={post.tint}
        badge={badge ?? (cat ? getCategoryName(cat, lang) : undefined)}
      />
      {cat ? (
        <span className={styles.catTag} data-c={cat.c}>
          {getCategoryName(cat, lang)}
        </span>
      ) : null}
      <h3>{post.title}</h3>
      <div className={styles.pcFoot}>
        <span className={styles.avatar}>{post.author.initials}</span>
        <span>{post.author.name}</span>
        <span className={styles.dotSep} />
        <span>{formatDate(post.date, lang)}</span>
      </div>
    </Link>
  );
}

/** Compact ranked list item (design `.mini`). */
export function MiniItem({
  post,
  lang,
  rank,
}: {
  post: BlogPost;
  lang: Locale;
  rank: number;
}) {
  const cat = getCategory(post.category);
  return (
    <Link className={styles.mini} href={`/${lang}${post.href}`}>
      <span className={styles.rk}>{String(rank).padStart(2, "0")}</span>
      <div className={styles.mtxt}>
        <h4>{post.title}</h4>
        {cat ? (
          <div className={styles.mc}>
            <span className={styles.catTag} data-c={cat.c}>
              {getCategoryName(cat, lang)}
            </span>
          </div>
        ) : null}
      </div>
      <span className={styles.arrow}>
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.4"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M7 17 17 7M7 7h10v10" />
        </svg>
      </span>
    </Link>
  );
}