import Link from "next/link";
import { Spotlight } from "../ui/Spotlight";
import { formatDate } from "@/lib/format";
import type { DevblogPost } from "@/lib/devblog";

type Props = {
  post: DevblogPost;
  /** Small label above the date. */
  eyebrow?: string;
  /** Heading level, so the panel fits the page outline. */
  as?: "h2" | "h3";
};

/**
 * A single post given real weight, as opposed to a row in `PostList`.
 *
 * Used by the home page and at the top of the devblog index: a list of one is
 * indistinguishable from an empty section, and even with twenty posts the most
 * recent one deserves more than the same 8rem row as the rest.
 */
export function PostFeature({ post, eyebrow = "Latest", as: Tag = "h3" }: Props) {
  return (
    <Link
      href={`/devblog/${post.slug}`}
      className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-surface p-8 transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent lg:p-10"
    >
      <div className="flex items-center gap-4 text-[0.65rem] uppercase tracking-[0.2em] text-foreground-muted">
        <span className="text-accent">{eyebrow}</span>
        <time dateTime={post.date}>{formatDate(post.date)}</time>
      </div>

      <Tag className="mt-5 font-display text-3xl leading-[1.05] tracking-wider transition-colors duration-300 group-hover:text-accent sm:text-4xl">
        {post.title.toUpperCase()}
      </Tag>

      {post.excerpt && (
        <p className="mt-4 leading-relaxed text-foreground-muted">
          {post.excerpt}
        </p>
      )}

      <span className="mt-8 inline-flex items-center gap-2 font-display text-sm tracking-widest text-accent">
        READ THE POST
        <span
          aria-hidden
          className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1"
        >
          →
        </span>
      </span>

      <Spotlight />
    </Link>
  );
}