import Image from "next/image";
import Link from "next/link";

import { urlFor } from "@/sanity/image";
import type { PostListItem } from "@/sanity/queries";

/**
 * News card. Cover image is optional — Sanity content may ship without one.
 * When missing we render a brand-tinted placeholder block so the grid stays
 * visually even.
 *
 * When `featured` is true we render a larger hero variant: 16/9 cover,
 * bigger display heading, longer excerpt. Used at the top of /news and
 * optionally as the lead item in the homepage teaser.
 */
export function PostCard({
  post,
  featured = false,
}: {
  post: PostListItem;
  featured?: boolean;
}) {
  const size = featured ? 1600 : 800;
  const height = featured ? 900 : 800;
  const coverUrl = post.coverImage
    ? urlFor(post.coverImage).width(size).height(height).fit("crop").url()
    : "";
  const date = post.publishedAt
    ? new Date(post.publishedAt).toLocaleDateString("en-GB", {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
    : "";

  if (featured) {
    return (
      <Link
        href={`/news/${post.slug}`}
        className="group flex flex-col overflow-hidden rounded-xl border border-[var(--color-line)] bg-white transition-all hover:border-[var(--color-blue)] hover:shadow-lg md:flex-row"
      >
        <div className="relative aspect-[16/9] w-full overflow-hidden bg-[var(--color-mist)] md:aspect-auto md:w-1/2">
          {coverUrl ? (
            <Image
              src={coverUrl}
              alt=""
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              priority
              className="object-cover transition-transform group-hover:scale-[1.02]"
            />
          ) : null}
        </div>
        <div className="flex flex-1 flex-col justify-center p-8 md:p-12">
          <div className="flex items-center gap-3 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            <span className="rounded-full bg-[var(--color-blue)] px-2.5 py-1 text-white">
              Featured
            </span>
            {date && <span>{date}</span>}
          </div>
          <h3 className="mt-4 font-display text-[28px] md:text-[36px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
            {post.title}
          </h3>
          {post.excerpt && (
            <p className="mt-4 line-clamp-4 text-[16px] leading-relaxed text-[var(--color-slate)]">
              {post.excerpt}
            </p>
          )}
          {post.author?.name && (
            <div className="mt-6 text-[13px] text-[var(--color-slate)]">
              by {post.author.name}
            </div>
          )}
        </div>
      </Link>
    );
  }

  return (
    <Link
      href={`/news/${post.slug}`}
      className="group flex flex-col rounded-lg border border-[var(--color-line)] bg-white transition-all hover:border-[var(--color-blue)] hover:shadow-md"
    >
      <div className="relative aspect-square w-full overflow-hidden rounded-t-lg bg-[var(--color-mist)]">
        {coverUrl ? (
          <Image
            src={coverUrl}
            alt=""
            fill
            sizes="(max-width: 768px) 100vw, 33vw"
            className="object-cover transition-transform group-hover:scale-[1.02]"
          />
        ) : null}
      </div>
      <div className="flex flex-1 flex-col p-5">
        {date && (
          <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            {date}
          </div>
        )}
        <h3 className="mt-2 font-display text-[19px] font-bold leading-tight tracking-tight text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
          {post.title}
        </h3>
        {post.excerpt && (
          <p className="mt-2 line-clamp-3 text-[14px] leading-relaxed text-[var(--color-slate)]">
            {post.excerpt}
          </p>
        )}
        {post.author?.name && (
          <div className="mt-4 text-[12px] text-[var(--color-slate)]">
            by {post.author.name}
          </div>
        )}
      </div>
    </Link>
  );
}
