import { Gem, cn } from "@rubis/ui";

import type { PostSummary } from "../../lib/api";

const DATE_FMT = new Intl.DateTimeFormat("fr-FR", {
  year: "numeric",
  month: "long",
  day: "numeric",
});

export function PostCard({
  post,
  className,
}: {
  post: PostSummary;
  className?: string;
}) {
  const dateLabel = post.publishedAt ? DATE_FMT.format(new Date(post.publishedAt)) : null;

  return (
    <a
      href={`/blog/${post.slug}`}
      className={cn(
        "group flex flex-col bg-white border border-line rounded-card overflow-hidden",
        "transition-all duration-150",
        "hover:no-underline hover:-translate-y-0.5 hover:border-rubis-light hover:shadow-card",
        className,
      )}
    >
      <div className="aspect-[16/9] flex items-center justify-center bg-gradient-to-br from-rubis-glow to-cream-2">
        {post.heroImageUrl ? (
          <img
            src={post.heroImageUrl}
            alt={post.heroImageAlt ?? post.title}
            loading="lazy"
            className="size-full object-cover"
          />
        ) : (
          <Gem size={56} className="opacity-40" />
        )}
      </div>
      <div className="p-6 flex-1 flex flex-col">
        <div className="flex items-center gap-2 text-[11.5px] uppercase tracking-[0.08em] font-semibold text-ink-3 mb-3">
          {dateLabel && (
            <time dateTime={post.publishedAt ?? undefined}>{dateLabel}</time>
          )}
          {dateLabel && <span aria-hidden className="size-[3px] rounded-full bg-ink-3" />}
          <span>{post.readingTimeMinutes} min de lecture</span>
        </div>
        <h2 className="font-display font-bold text-ink text-[20px] tracking-[-0.018em] leading-[1.2]">
          {post.title}
        </h2>
        <p className="mt-3 flex-1 text-[14.5px] leading-relaxed text-ink-2">{post.excerpt}</p>
        <span className="mt-4 inline-flex items-center gap-1.5 font-display font-semibold text-[14px] text-rubis">
          Lire l'article
          <span className="transition-transform group-hover:translate-x-0.5">→</span>
        </span>
      </div>
    </a>
  );
}